首页 > reactjs > 如何在本机中实现以下设计?

如何在本机中实现以下设计? (How to achieve below design in react native?)

问题

在此输入图像描述

有人可以帮助我实现与上面相同的设计

这是我的代码请看看!

<TabView>
                    {Buttons.map((each, i) => {
                        return(
                            <ButtonTabView color={each.color}>
                                <ButtonText color={each.color}>{each.title}</ButtonText>
                            </ButtonTabView>
                        )
                    })}
                    </TabView>


export const TabView = styled.View`
    flexDirection: row;
    padding: 10px;
    justify-content: space-around;
`;
export const ButtonTabView = styled.TouchableOpacity`
    padding: 10px;
    border-width: 1px;
    border-radius: 8px;
    border-color: ${props => props.color};
    justify-content: center;
`;
export const ButtonText = styled.Text`
    color: ${props => props.color};
    font-family: ${Theme.fontFamily.regular};
    font-size: ${Theme.fontSize.semiRegular};
`;

我在实现相同的设计时遇到问题我在这里错过了任何造型属性吗?

解决方法

你需要更换你的TabView

export const TabView = styled.View`
    flex-direction: row;
    flex-wrap: wrap;
    padding: 10px;
    justify-content: space-around;
`;

问题

enter image description here

can some one please help me to achieve the same design as above

Here is my code please have a look into that!

<TabView>
                    {Buttons.map((each, i) => {
                        return(
                            <ButtonTabView color={each.color}>
                                <ButtonText color={each.color}>{each.title}</ButtonText>
                            </ButtonTabView>
                        )
                    })}
                    </TabView>


export const TabView = styled.View`
    flexDirection: row;
    padding: 10px;
    justify-content: space-around;
`;
export const ButtonTabView = styled.TouchableOpacity`
    padding: 10px;
    border-width: 1px;
    border-radius: 8px;
    border-color: ${props => props.color};
    justify-content: center;
`;
export const ButtonText = styled.Text`
    color: ${props => props.color};
    font-family: ${Theme.fontFamily.regular};
    font-size: ${Theme.fontSize.semiRegular};
`;

I'm getting problem to achieve same design am I missing any styling property here?

解决方法

you need to replace your TabView here,

export const TabView = styled.View`
    flex-direction: row;
    flex-wrap: wrap;
    padding: 10px;
    justify-content: space-around;
`;
相似信息