Reactjs 如何在React Native中将单个项目显示为网格？

了解如何使两个项目彼此相邻，我可以轻松地执行

flexDirection:“行”

，我感兴趣的是如何在保持

2x

网格的同时一次渲染一个项目

我的最终目标是拥有2列0到n行，每个项目在通过数组映射后当前都被呈现

这看起来像这样：

<ScrollView horizontal={!showAll} contentContainerStyle={{ paddingHorizontal: 16 }} style={{ width: screenWidth }} showsHorizontalScrollIndicator={false}>
     {info && info.map((t, i) => {
          return this.parseTidbit(t, i)
     })}
</ScrollView>

然后：

index}
showshorizontalscrolindicator={false}
数据={info}
renderItem={（{item:tidbit，index:i}）=>this.parseTidbit（tidbit，i）}
{…通行道具}
/>

这将生成ExceptionManager.js:82未处理的js异常：不变冲突：不变冲突：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

---

有更好的方法吗？

在这种情况下，

能帮你吗？也许吧！我刚刚用一个尝试/当前问题更新了这个问题。由于水平模式不支持numcolumn，所以它不像您的代码片段那么简单。

let passableProps = {}
if(showAll){
  passableProps['numColumns'] = 2
}

  <FlatList
        horizontal={!showAll}
        contentContainerStyle={{ paddingHorizontal: 16 }}
        style={{ width: screenWidth }}
        keyExtractor={(item, index) => index }
        showsHorizontalScrollIndicator={false}
        data={info}
        renderItem={({item: tidbit, index: i}) => this.parseTidbit(tidbit, i) }
        {...passableProps}
/>