Javascript react native：如何将一到三个项目安排在一行中，将四个项目安排在一行中？

我怎样才能把一到三个项目排成一行，把四个项目排成一行？ 我添加了我想要实现的目标的图片：

从“React”导入*作为React；
从“react native paper”导入{Searchbar}；
从“react native”导入{视图、文本、平面列表、复选框、样式表}；
从“@expo/vector icons”导入{MaterialCommunityIcons}；
常量过滤器\无线电\道具=[
{标签：“一”，值：0}，
{label:'two'，值：1}，
{标签：'three'，值：2}，
{标签：'four'，值：3}，
{标签：“五”，值：4}，
{标签：'six'，值：5}，
{标签：'seven'，值：6}，
{标签：“八”，值：7}，
];
让数据=[]；
常量MyComponent=（道具）=>{
const[firstQuery，setFirstQuery]=React.useState（“”）；
const[message，setMessage]=React.useState（“”）；
常量[FilterModalVisible，setFilterModalVisible]=React.useState（false）；
常量getData=（）=>{
让数据=[]；
对于（设i=0；i{
getData（）；
}，[FilterModalVisible]）；
返回(
{
setFirstQuery（查询）；
}}
值={firstQuery}
icon=“向右箭头”
OnConPress={（）=>{
setFilterModalVisible（！FilterModalVisible）；
}}
/>
{' '}
FilterModalVisible{FilterModalVisible？'：True'：'：False'}
{getData（）.map（（d）=>(
{item.label}
}
/>
))}
);
};
const styles=StyleSheet.create({
项目视图：{
宽度：50，
身高：50，
背景颜色：“青色”，
差额：10，
为内容辩护：“中心”，
对齐项目：“居中”，
},
正文：{
颜色：'白色'，
},
});
导出默认MyComponent；

---

在您可以访问索引的flatlets中，您可以检查索引是否小于3，然后应用不同的样式（在本例中，宽度=33.33%）

{
返回指数<3？
{item.label}
:
{item.label}
}}
/>
const styles=StyleSheet.create({
项目视图：{
弹性：1，
身高：50，
背景颜色：“青色”，
差额：10，
为内容辩护：“中心”，
对齐项目：“居中”，
},
正文：{
颜色：“白色”
},
三列：{
宽度：“33.33%”
}
});

我的意思是只分三部分下线..比如/n您也可以尝试使用

react native gridview

：我希望给出的示例能够回答您的问题，或者至少能让您了解如何解决问题。快乐编码：）

const filter_radio_props = [
  { label: 'one', value: 0 },
  { label: 'two', value: 1 },
  { label: 'three', value: 2 },
  { label: 'four', value: 3 },
  { label: 'five', value: 4 },
  { label: 'six', value: 5 },
  { label: 'seven', value: 6 },
  { label: 'eight', value: 7 },
];

import * as React from 'react';
import { Searchbar } from 'react-native-paper';
import { View, Text, FlatList, CheckBox, StyleSheet } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
const filter_radio_props = [
  { label: 'one', value: 0 },
  { label: 'two', value: 1 },
  { label: 'three', value: 2 },
  { label: 'four', value: 3 },
  { label: 'five', value: 4 },
  { label: 'six', value: 5 },
  { label: 'seven', value: 6 },
  { label: 'eight', value: 7 },
];

let data = [];

const MyComponent = (props) => {
  const [firstQuery, setFirstQuery] = React.useState('');
  const [message, setMessage] = React.useState('');
  const [FilterModalVisible, setFilterModalVisible] = React.useState(false);

  const getData = () => {
    let data = [];
    for (let i = 0; i < filter_radio_props.length; i += 3) {
      data.push(filter_radio_props.slice(i, i + 3));
      console.log(filter_radio_props.slice(i, i + 3));
    }
    // console.log(data);
    if (data[data.length - 1].length !== 3) {
      if (data.length == 1) {
        data.[data.length-1].push({});
        data.[data.length-1].push({});
      } else {
        data.[data.length-1].push({});
      }
    }
    return data;
  };

  React.useEffect(() => {
    getData();
  }, [FilterModalVisible]);

  return (
    <View>
      <Searchbar
        style={{ marginTop: 60 }}
        placeholder="Search"
        onChangeText={(query) => {
          setFirstQuery(query);
        }}
        value={firstQuery}
        icon="arrow-right"
        onIconPress={() => {
          setFilterModalVisible(!FilterModalVisible);
        }}
      />
      <Text>
        {' '}
        FilterModalVisible {FilterModalVisible ? ' : True' : ' : False'}
      </Text>
      {getData().map((d) => (
        <FlatList
          data={d.reverse()}
          numColumns={3}
          renderItem={({ item }) => 
           <View style={[styles.itemView, !item.label?{backgroundColor: ""}:null]}>
              <Text style={styles.text}>{item.label}</Text>
            </View>}
        />
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  itemView: {
    width: 50,
    height: 50,
    backgroundColor: 'teal',
    margin: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: 'white',
  },
});

export default MyComponent;

 <FlatList
        data={filter_radio_props.slice(3)}
        renderItem={({ item, index }) => {
          return index < 3 ? 
          <View style={styles.threeColumn}>
            <Text style={styles.text}>{item.label}</Text>
            <CheckBox value={item.value}/>
          </View>
          :
          <View style={styles.itemView}>
            <Text style={styles.text}>{item.label}</Text>
            <CheckBox value={item.value}/>
          </View>
        }}
      />


const styles = StyleSheet.create({
  itemView: {
    flex: 1,
    height: 50,
    backgroundColor: 'teal',
    margin: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text:{
    color: "white"
  },
  threeColumn: {
    width: '33.33%'
  }
});