Reactjs 将一行中的3个项目与react native对齐

在一个react原生项目中工作，每周有一系列的天数，目前试图显示每行3天，然后转到下一行，但我遇到了困难

{tags.map（项=>(
{item.label}
))}
;

我想实现这样的目标：

Monday Tuesday Wednesday
Thursday Friday

---

您可以使用

numColumns={3}

检查

FlatList

请检查以下代码

 <FlatList  numColumns={3}
                    data={[  
                        {key: 'Android'},{key: 'iOS'}, {key: 'Java'},{key: 'Swift'},  
                        {key: 'Php'},{key: 'Hadoop'},{key: 'Sap'},  
                        {key: 'Python'},{key: 'Ajax'}, {key: 'C++'},  
                        {key: 'Ruby'},{key: 'Rails'},{key: '.Net'},  
                        {key: 'Perl'},{key: 'Sap'},{key: 'Python'},  
                        {key: 'Ajax'}, {key: 'C++'},{key: 'Ruby'},  
                        {key: 'Rails'},{key: '.Net'},{key: 'Perl'}  
                    ]}  
                    renderItem={({item}) =>  
                        <Text style={{  
        padding: 10,  
        fontSize: 18,  
        height: 44
                        }}  
                              >{item.key}</Text>}  

                />

{item.key}
/>

请检查这个演示

---

如果您只需要强制换行，您可以将

flexGrow

属性添加到项目中，并在容器视图上设置

flexWrap:“换行”

：

<View style={{ width: '100%', alignItems: 'center', flex: 1, flexWrap: 'wrap'}}>
 {
tags.map((item) => (
   <Text style={{width: '30%', backgroundColor:'green', color:'white', borderRadius:20, paddingRight: 5, flexGrow:1}}>{item.label}</Text>
))
}
 </View>

然后在组件上实施

isNthChild

：

function isNthChild(item) { return item.key >= 3; // you can go wild and implement your logic here, this is just an example }

---

您可以简单地使用

组件，它有一个名为的道具，当

水平={false}

时，它基本上呈现项目，并且将像

柔性包装

布局一样曲折

所以你可以这样做：

Monday Tuesday Wednesday
Thursday Friday

从“React”导入React；
从“react native”导入{Text，View，StyleSheet，FlatList}；
常量数据=[“星期一”、“星期二”、“星期三”、“星期四”、“星期五”]；
导出默认值（）=>(
{day}
/>
);
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
},
要素：{
水平方向：10，
填充垂直：5，
差额：5，
边框宽度：1，
边界半径：10，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});

您将有如下内容：

Monday Tuesday Wednesday
Thursday Friday

去看看快餐店