react-native-waterfall-flow
react-native-waterfall-flow copied to clipboard
axerjs
设置列数为2，只显示奇数列数据
设置完列数后，只显示了奇数列的数据，偶数列的是空白的
可以贴一下你的列表配置代码吗
<WaterfallFlow style={{ flex: 1, width: '100%', backgroundColor: 'white' }} contentContainerStyle={{ backgroundColor: 'red' }} key={cardWidth.toString() + '' + cols.toString() + '' + uniqueID} refreshing={false} data={this.state.items} keyExtractor={(item, index) => index.toString() + '_' + cols.toString} ListFooterComponent={ <Footer footbarState={footbarState} theme={theme} fontLevel={fontLevel} /> } showsVerticalScrollIndicator={false} initialNumToRender={20} numColumns={2} onEndReachedThreshold={0.1} onEndReached={this.onScrollEndReached.bind(this)} onViewableItemsChanged={this.onViewableItemsChanged} // renderItem={({ item, index, columnIndex }) => this.rendItem(item, index, columnIndex)} renderItem={({ item, index, columnIndex }) => { return ( <View style={{ backgroundColor: 'red', height: 100, width: (cardWidth - 16 - 10) / 2, paddingLeft: columnIndex == 0 ? 16 : 10, flex: 1 }} > <Text style={{ width: '100%', backgroundColor: 'green' }}>index: {index}</Text> </View> ) }} />
显示如图，只有左侧奇数列，右侧偶数列没了
设置完列数后，只显示了奇数列的数据，偶数列的是空白的
可以贴一下你的列表配置代码吗
<WaterfallFlow style={{ flex: 1, width: '100%', backgroundColor: 'white' }} contentContainerStyle={{ backgroundColor: 'red' }} key={cardWidth.toString() + '' + cols.toString() + '' + uniqueID} refreshing={false} data={this.state.items} keyExtractor={(item, index) => index.toString() + '_' + cols.toString} ListFooterComponent={
} showsVerticalScrollIndicator={false} initialNumToRender={20} numColumns={2} onEndReachedThreshold={0.1} onEndReached={this.onScrollEndReached.bind(this)} onViewableItemsChanged={this.onViewableItemsChanged} // renderItem={({ item, index, columnIndex }) => this.rendItem(item, index, columnIndex)} renderItem={({ item, index, columnIndex }) => { return ( <View style={{ backgroundColor: 'red', height: 100, width: (cardWidth - 16 - 10) / 2, paddingLeft: columnIndex == 0 ? 16 : 10, flex: 1 }}
<Text style={{ width: '100%', backgroundColor: 'green' }}>index: {index}
) }} />
renderItem里面width和flex：1是不需要的
去掉renderItem里面width和flex：1，应该是没有问题的吧
这样修改后第一列和第二列的重合了
代码如下：
<WaterfallFlow
style={{ width: '100%', backgroundColor: 'blue' }}
key={cardWidth.toString() + '' + cols.toString() + '' + uniqueID}
refreshing={false}
keyExtractor={(item, index) => index.toString() + '_' + cols.toString}
data={this.state.items}
numColumns={2}
showsVerticalScrollIndicator={false}
initialNumToRender={20}
onEndReachedThreshold={0.1}
onEndReached={this.onScrollEndReached.bind(this)}
onViewableItemsChanged={this.onViewableItemsChanged}
renderItem={(item, index, columnIndex) => {
return (
<View
style={{
backgroundColor: 'red',
height: 100,
paddingLeft: columnIndex == 0 ? 16 : 10
}}
>
<Text>这是第{index}个item</Text>
</View>
)
}}
/>
我看你代码view和text都没有闭合，闭合后我去掉了width和flex，能够正常展示的
上面的是粘贴复制有漏掉的
代码是这样子的
运行过example样例代码吗
用你的代码运行的，你看看