Question

了解要使两个项目彼此相邻，我可以轻松完成flexDirection: 'row'，我对如何在保持2 by x网格的情况下一次渲染一个项目很感兴趣。

我的最终目标是拥有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>

这将生成我最初要查找的内容，即水平滚动。切换变量showAll时，它应生成parseTidbit在上述2 x网格中返回的View。我似乎不知道该怎么做。

我尝试集思广益i % 2 === 0渲染，但是我被卡住了并且可以用一只手。预先感谢。

更新：

我正在尝试将numColumns与FlatList一起使用，但是当您传递numColumns为null或false或0（水平显示时）时会出现问题。所以我试图在传播对象时根本不通过numColumns的传入/排除形式。这真的没有解决，不确定我的其他选择是什么

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

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

还有更好的方法吗？

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

0 个答案: