Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

设置列数为2,只显示奇数列数据 #27

Open
coderWeil opened this issue Feb 13, 2023 · 15 comments
Open

设置列数为2,只显示奇数列数据 #27

coderWeil opened this issue Feb 13, 2023 · 15 comments

Comments

@coderWeil
Copy link

设置完列数后,只显示了奇数列的数据,偶数列的是空白的

@axeryu
Copy link
Contributor

axeryu commented Feb 13, 2023

设置完列数后,只显示了奇数列的数据,偶数列的是空白的

可以贴一下你的列表配置代码吗

@coderWeil
Copy link
Author

设置完列数后,只显示了奇数列的数据,偶数列的是空白的

可以贴一下你的列表配置代码吗

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

)
}}
/>

@coderWeil
Copy link
Author

截屏2023-02-14 14 24 41
显示如图,只有左侧奇数列,右侧偶数列没了

@axeryu
Copy link
Contributor

axeryu commented Feb 15, 2023

设置完列数后,只显示了奇数列的数据,偶数列的是空白的

可以贴一下你的列表配置代码吗

<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是不需要的

@axeryu
Copy link
Contributor

axeryu commented Feb 15, 2023

去掉renderItem里面width和flex:1,应该是没有问题的吧

@coderWeil
Copy link
Author

去掉renderItem里面width和flex:1,应该是没有问题的吧

这样修改后第一列和第二列的重合了
Uploading 截屏2023-02-15 10.49.08.png…
代码如下:
<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
}}
>
这是第{index}个item

)
}}
/>

@coderWeil
Copy link
Author

截屏2023-02-15 10 49 08

@axeryu
Copy link
Contributor

axeryu commented Feb 15, 2023

我看你代码view和text都没有闭合,闭合后我去掉了width和flex,能够正常展示的

@coderWeil
Copy link
Author

我看你代码view和text都没有闭合,闭合后我去掉了width和flex,能够正常展示的

上面的是粘贴复制有漏掉的
截屏2023-02-15 13 43 13
代码是这样子的

@axeryu
Copy link
Contributor

axeryu commented Feb 15, 2023

我看你代码view和text都没有闭合,闭合后我去掉了width和flex,能够正常展示的

上面的是粘贴复制有漏掉的 截屏2023-02-15 13 43 13 代码是这样子的

运行过example样例代码吗

@axeryu
Copy link
Contributor

axeryu commented Feb 15, 2023

image
image
用你的代码运行的,你看看

@coderWeil
Copy link
Author

image image 用你的代码运行的,你看看

好头疼,看着没啥差别啊,咋就不行呢

@axeryu
Copy link
Contributor

axeryu commented Feb 15, 2023

版本是最新版吗

@coderWeil
Copy link
Author

"react-native-waterfall-flow": "^1.1.4"

@whytimber
Copy link

应该是嵌套scrollview了吧,我这里也是拿不到渲染后宽度,onContentSizeChange 不调用

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants