如何在React Native中实现以下设计？

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

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

Answer 1

您快到了，您需要再添加一个属性，以flex-wrap: wrap样式添加TabView。 flexWrap的默认行为是nowrap。看一下文档here。

此外，根据共享代码justifyContent，您可能需要考虑space-around，这不符合共享的要求。相反，flex-start会模仿您共享的设计。

在ButtonTabView组件周围留一些边距。

注意：很明显，您正在使用Styled Component，但是在共享代码中您已经编写了flexDirection，需要将其更改为flex-direction。

希望这会有所帮助！

Answer 2

您需要在此处替换TabView，

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