加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

react-native ListView bug解决办法

发布时间:2020-12-15 07:12:01 所属栏目:百科 来源:网络整理
导读:昨天实现ListView加载图片时,出现了一个坑爹的问题,数据源如果在类里声明好,加载无问题,但是用网络请求获取数据后,界面显示图片不全。 显示没问题时的数据源 const data = [{ url: 'https://avatars2.githubusercontent.com/u/7970947?v=3s=460' },{ ur

昨天实现ListView加载图片时,出现了一个坑爹的问题,数据源如果在类里声明好,加载无问题,但是用网络请求获取数据后,界面显示图片不全。

显示没问题时的数据源

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'
}];
    ...
    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。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读