如何在本机中实现以下设计？

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

你需要在这里更换你的TabView，

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

Answer 2

你几乎就在那里，你需要再添加一个属性，在flex-wrap: wrap风格中添加TabView。 flexWrap的默认行为是nowrap。看看文件here。

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

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

注意：很明显你使用的是Styled Component，但在共享代码中你写了flexDirection，需要更改为flex-direction。

希望这会有所帮助！