Reactjs 如何在react本机标记之间插入脚本

我正在构建一个两列样式列表（2*x）。它从API填充按钮的位置

我试图在第二列中添加一个if条件（if data in null skip创建一个按钮）

请告知如何在标签之间添加if条件

渲染中

  Elementlist.push(
    <View style={styles.RowElement}>
      <View style={styles.Column}>
        <TouchableOpacity onPress={() => this.props.navigation.navigate("elementDetails")}>
          <Text>{state.elementID[x]}</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.Column}>
        <TouchableOpacity onPress={() => this.props.navigation.navigate("elementDetails")}>
          <Text>{state.elementID[x + 1]}</Text>
        </TouchableOpacity>
      </View>
    </View>)
  x = x + 1;
  if (this.state.UnitsID[x + 1] == null) { break; }
}

Elementlist.push(
this.props.navigation.navigate（“elementDetails”）}>
{state.elementID[x]}
this.props.navigation.navigate（“elementDetails”）}>
{state.elementID[x+1]}
)
x=x+1；
if（this.state.UnitsID[x+1]==null）{break；}
}

作为回报

      <ScrollView>
        {Unitslist}
      </ScrollView>

{Unitslist}

React Native FlatList组件已使用numColums属性具有此功能

所以你可以很容易地申请你的案件

样本：

import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text } from 'react-native';
import Constants from 'expo-constants';

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
    {
    id: '58694a0f-3da1-471f-bd96-145571e29d73',
    title: 'Fourth Item',
  },
];

function Item({ title }) {
  return (
    <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
    </View>
  );
}

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        numColumns={2}
        data={DATA}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 10
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 16,
  },
});

从“React”导入React；
从“react native”导入{SafeAreaView，View，FlatList，StyleSheet，Text}；
从“expo常量”导入常量；
常数数据=[
{
id:'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'，
标题：“第一项”，
},
{
id:'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'，
标题：“第二项”，
},
{
id:'58694a0f-3da1-471f-bd96-145571e29d72'，
标题:"第三项",，
},
{
id:'58694a0f-3da1-471f-bd96-145571e29d73'，
标题：“第四项”，
},
];
函数项（{title}）{
返回(
{title}
);
}
导出默认函数App（）{
返回(
}
keyExtractor={item=>item.id}
/>
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
玛金托普：10
},
项目：{
背景颜色：“#f9c2ff”，
填充：20，
Margin:8，
marginHorizontal:16，
},
标题：{
尺寸：16，
},
});

非常感谢您。在其他情况下，我仍然需要添加条件，例如（如果data！=null，则插入标记）。那么如何在标记之间添加for if条件呢。