React Native FlashList - numColumns因内容而异

fbcarpbf 于 2023-10-22 发布在 React

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

我有一个文档列表，我想在React Native中使用Shopify Flash列表显示它们，如下图所示。如果一个文件类型是一个视频，我希望它采取整个屏幕的宽度，所有其他文件应显示两行。我尝试将numColumns属性设置为1或2，并修改getColumnFlex。但我无法实现我想要的布局。

Index.js：

<View 
style={{flexDirection: 'row',
    minHeight: 2,
    width: '100%',
}>
            <FlashList
              data={documentsList}
              keyExtractor={(item, index) => index.toString()}
              refreshControl={
                <RefreshControl refreshing={loadingDocuments} onRefresh={fetchAllDocuments} />
              }
              renderItem={({ item, index }) => (
                <DocumentsList
                  documentsList={documentsList}
                  document={item}
                  index={index}/>
              )}
              estimatedItemSize={200}
            />
</View>

DocumentList.js

<TouchableOpacity
      key={document.id}
      style={{
        width: document.type === 'video' ? '100%' : ’50%’,
        height: document === 'video' ? 280 : 210,
      }}>
{/* Code of my component*/}
</TouchableOpacity>

react-native

来源：https://stackoverflow.com/questions/77330979/react-native-flashlist-numcolumns-varies-depending-on-the-content

1条答案

按热度按时间

xuo3flqw1#

不确定是否可以使用FlashList，但如果可以使用FlatList，则可以使用columnWrapperStyle中的flexWrap控制项目 Package 。

<FlatList
  columnWrapperStyle={{ flexWrap: 'wrap' }}
  numColumns={3}
  data={...}
  renderItem={({ item }) => (
    <View
      style={{
        width: item.type == 'video' ? '100%' : '50%',
        height: item.type == 'video' ? 280 : 210
      }}>
      <View style={{ backgroundColor: 'lightgrey', flex: 1, margin: 10 }} />
    </View>
  )}
/>

赞(0）回复(0）举报 2023-10-22

我来回答

React Native FlashList - numColumns因内容而异

1条答案

相关问题

热门标签

最新问答