在同一行上React NativeFlatList呈现/显示文本

o75abkj4 于 2022-11-17 发布在 React

关注(0)|答案(1)|浏览(166)

我在react native中使用FlatList呈现文本列表时遇到了一个问题，我无法在同一行上呈现/显示文本，我想以段落的形式显示文本。默认情况下，FlatList会在新行上呈现每一项。

代码

<FlatList
   data={list}
   renderItem={({ item }) => (
       <Text style={styles.textStyle}>{item.text}</Text>
    )}
/>

输出：

这是文本1
这是文本2
这是文本3
这是文本4

预期输出

这是文本1这是文本2这是文本3这是文本4

我尝试过的解决方案

我已经尝试过在FlastList中使用flex-wrap，但目前还不支持。
这个问题可以通过使用ScrollView来解决，但是我的列表确实很大，而且它有很多性能问题，文本会随机自动调整大小。我原来的列表有阿拉伯语的文本。
我也试过horizontal={true}和numColumns={2}，但它在段落之间添加白色。

示例

这是文本1 * * 空白 * * 这是
文本2这是 * * 空白 * * 文本3
请告诉我是否可以使用平面列表以这种方式呈现文本。
提前感谢：）

react-native

来源：https://stackoverflow.com/questions/74411714/react-native-flatlist-render-display-text-on-the-same-line

1条答案

按热度按时间

oknwwptz1#

这就是你想要的：

<FlatList
   data={list}
   renderItem={({item}) => <Text style={styles.textStyle}>{item.text}</Text>}
   horizontal={true}
   ItemSeparatorComponent={() => <Text> </Text>}
  />

当您添加numColumns={2}时，这意味着您希望将其分隔为两列，因此我添加了ItemSeparatorComponent。它是如何工作的？
它在您使用的数据中的每一项之间呈现一个组件。在本例中，我添加了一个包含单个空格的组件，以便将它们分隔开。

赞(0）回复(0）举报 2022-11-17

我来回答

在同一行上React NativeFlatList呈现/显示文本

1条答案

相关问题

热门标签

最新问答