reactjs - 如何在本机反应中实现以下设计？

Question

有人可以帮我实现与上述相同的设计吗

这是我的代码，请查看！

<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};
`;

我在实现相同设计时遇到问题我在这里缺少任何样式属性吗？

标签： reactjsreact-native

Answer 1

你需要更换你的TabView这里，

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