你可以简单地使用一个<Flatlist />组件，它有一个名为numColums的 prop ，基本上是在horizontal={false}时渲染项目，并且会像flexWrap布局一样锯齿形。
你可以这样做：

import React from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';

const data = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];

export default () => (
  <FlatList
    data={data}
    numColumns={3}
    style={styles.container}
    renderItem={({ item: day }) => <Text style={styles.element}>{day}</Text>}
  />
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  element: {
    paddingHorizontal: 10,
    paddingVertical: 5,
    margin: 5,
    borderWidth: 1,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

你会得到这样的东西：

查看https://snack.expo.io/@abrahamcalf/3-col-flatlist上的小吃

您可以使用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>}  

                />

请检查此演示
https://snack.expo.io/@vishal7008/flat-list

如果你只需要强制换行，你可以将flexGrow属性添加到你的项目中，并在你的容器视图中设置flexWrap: 'wrap'：

<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>

如果你需要做一些像CSS nth-child功能的事情，这将变得有点困难。因为样式在RN中是普通对象，你可以通过向width或flexGrow属性分配一个函数来实现这一点，如下所示：

<Text style={[{width: '30%', backgroundColor:'green', color:'white', borderRadius:20, paddingRight: 5}, { flexGrow: this.isNthChild(item) ? 0 : 1}]}></Text>

然后在组件上实现isNthChild：

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