ListView不刷新



  • 项目比较老,用的ListView。

    场景

    一个分类列表数据源,使用ListView显示,点击列表项,使其高亮。

    问题

    当点击列表项时,改变状态中的列表项索引,ListView未刷新,但是状态已经改变。

    代码

    构造函数:

    let categories = [{
        name:'1',
        desc:'...'
    },{
        name:'2',
        desc:'...'
    }];
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
        dataSource: ds.cloneWithRows(), //数据源
        selectIndex: 0,                 //选中列表项的索引
    };
    

    render():

    <ListView
        dataSource={this.state.dataSource}
        renderRow={this._renderRow.bind(this)}
    />
    

    _renderRow():

    _renderRow(rowData,sectionID,rowID){
        return (
            <TouchableOpacity
                activeOpacity = {0.8}
                onPress = {()=>{this.setState({selectIndex: rowID})}} >
                <View style={this.state.selectIndex==rowID?({backgroundColor:'#666'}):(null)}>
                    <Text>{rowData.name}</Text>
                    <Text>{rowData.desc}</Text>
                </View>
            </TouchableOpacity>
        )
    }
    

  • administrators

    要刷新listiview【必须】修改datasource
    0_1505971824232_datasource.png



  • @晴明
    我这边仅是将源数据通过ListView进行显示,通过声明一个selectIndex的状态来记录当前点击的列表项索引,当点击了列表项,将当前点击列表项的rowId设置到selectIndex中,并判断selectIndex和rowId是否相等,相等就设置当前行的背景色。

    但的状态selectIndex修改后,使用selectIndex的ListView似乎没有监听到selectIndex的改变



  • 换了种实现方式:循环源数据,生成UI放入指定数组中,最后返回装UI的数组


  • administrators

    我已经解释过了,不管你是【仅仅】想实现什么,你要做的都必须通过修改datasource来实现

    不管你做单选多选,你都必须修改datasource

    其他做法都或多或少损失了性能


登录后回复