react-native ListView bug解决办法
2017-07-18 15:02
239 查看
昨天实现ListView加载图片时,出现了一个坑爹的问题,数据源如果在类里声明好,加载无问题,但是用网络请求获取数据后,界面显示图片不全。
查了很多资料,还是没发现问题出在哪,后来将renderRow中的Image改为Text,还是显示不全,但这时我滑动了屏幕,竟然显示完全了,然后就去搜了下问题,果然有解决方案:在listView中添加removeClippedSubviews属性。
问题解决,再将Text换回Image。
显示没问题时的数据源
const data = [{ url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460' }, { url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460' }, { url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460' }, { url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460' }, { url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460' }, { url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460' }]; ... constructor(props) { super(props); let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows(data), }; } ...
显示有问题时的数据源
... constructor(props) { super(props); let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds, }; } ... // 获取数据成功方法 getOrderPictureSuccessCallBack(result) { if(result){ this.setState({ dataSource: this.state.dataSource.cloneWithRows(result), }); } } ...
查了很多资料,还是没发现问题出在哪,后来将renderRow中的Image改为Text,还是显示不全,但这时我滑动了屏幕,竟然显示完全了,然后就去搜了下问题,果然有解决方案:在listView中添加removeClippedSubviews属性。
<ListView removeClippedSubviews={false} dataSource={this.state.dataSource} renderRow={this.renderRow} contentContainerStyle={styles.listViewStyle} />
问题解决,再将Text换回Image。
相关文章推荐
- React-native ListView缓存复用根本解决办法
- react-native启动android service bug解决办法
- ReactNative 分享解决listView的一个郁闷BUG
- react-native 键盘遮挡view的解决办法
- react-native ListView的属性flexWrap为wrap失效解决
- React Native 键盘管理和 Tab Navigator 在Android TextInput遮盖,Tab Navigator上移等问题解决办法
- react-native在Anroid真机运行时可能会遇到白屏的情况解决办法
- cocos 3.2 ListView渲染bug解决办法
- react-native在Anroid真机运行时可能会遇到白屏的情况解决办法
- 使用Hibernate+MySql+native SQL的BUG,以及解决办法
- 关于开源项目侧边栏字母搜索列表ListViewFilter的bug解决办法
- react-native-scrollable-tab-view和listview冲突解决
- 将React Native的版本从0.19.0升级到最新版或者大于0.20.1的解决办法
- reactnative 解决listview无法滚动的问题
- 关于React native reload还是原来界面的解决办法
- react-native报错[NSTaggedPointerString unsignedIntValue]: unrecognized selector sent to instance的解决办法
- react-native当点击TouchableOpacity时,要点击两下才会触发onPress解决办法
- react-native-image-picker在Android上闪退的解决办法(上传头像base64,压缩上传图片)
- react-native 在iOS上使用http链接的图片地址不显示| iOS9 & iOS10 HTTP 不能正常使用的解决办法