react-native ListView bug解决办法

来源:互联网 发布:java对于大数的处理 编辑:程序博客网 时间:2024/05/22 03:45

昨天实现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'}, {    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。

原创粉丝点击