React Native - 如何在ListView中更改数据时更新ListView中的图像

Question

我有这个ListView：

<ListView
                                          enableEmptySections={true}
                                          renderScrollComponent={props => <InfiniteScrollView {...props} />}
                                            style = {{height:this.state.listViewShow, flexDirection: 'column',
                                                          backgroundColor: '#263238'}}
                                            dataSource = {this.state.dataSource2}
                                            renderRow = {this.renderRowAP.bind(this)}
                                            canLoadMore={true}
                                                    onLoadMoreAsync={this.onEndReached}
                                                    //renderFooter={() => <View style={{height:this.state.footerHeight, alignItems: 'center', height: 40,}}><Image style={{width: 30, height: 30}} source={require('./images/loader.gif')} /></View> }
                                            >
                                          </ListView>

然后我有构建ListView的行：

import React, { Component } from 'react';
        import {
          AppRegistry,
          StyleSheet,
          Text,
          View,
          Navigator,
          TouchableHighlight,
          Dimensions,
          Image,
          TextInput,
          ListView,
        } from 'react-native';


        const Row = (rowData) => (

                    <View style={{flex: 1, height:80, flexDirection:'row' , borderBottomWidth: 1, borderColor: '#37474F'}}>
                        <View style={{flex: 1 , flexDirection:'row' , alignItems:'center', justifyContent:'center',}}>

                          <Image style={{width: 100, height: 80}} source={require('./images/default.png')}  />

                            <View style={{flex: 1}}>
                                <Text style={{color:'white', fontSize: 13, fontWeight:'bold', marginLeft: 10, color:'#ECEFF1' }}>{rowData.playlistName}</Text>
                                <Text style={{color:'white', fontSize: 12, fontWeight:'bold', marginLeft: 10, color:'gray'}}>{rowData.playlistCreated}</Text>
                            </View>
                        </View>
                        <TouchableHighlight onPress={ () => rowData.clickPlaylistItem(rowData.playlistID) }>
                            <View style={{ width: 80, height: 80, backgroundColor: '#37474F', alignItems:'center', justifyContent:'center',}}>

                                <Image style={{width: 40, height: 40}} source={ rowData.isSelected ? require('./images/tick2.png') : require('./images/tick.png')}  />


                             </View>
                        </TouchableHighlight>
                    </View>


        );

        export default Row;

我的ListView RenderRow方法：

renderRowAP(rowData: object, sectionID: number, rowID: number) {


                              return (
                                    <Row {...rowData} clickPlaylistItem={this.clickPlaylistItem} />

                                );


            }

单击ListView项目：

clickPlaylistItem = (playlistID) => {

                let tmpArrPlaylists = this.state.arrPlaylists;

                for(var i = 0; i < tmpArrPlaylists.length; i++){

                    var playlist = tmpArrPlaylists[i];
                    if(playlist.playlistID == playlistID){

                        if(playlist.isSelected){
                            playlist.isSelected = false;
                            console.log("false: " + playlistID);

                        }else{
                            playlist.isSelected = true;
                            console.log("true: " + playlistID);
                        }
                        break;
                    }
                }

                //this.state.arrPlaylists = tmpArrPlaylists;
                let ds = this.state.dataSource2.cloneWithRows(tmpArrPlaylists);
                this.setState({
                    arrPlaylists: tmpArrPlaylists,
                    dataSource2: ds,
                });
                this.forceUpdate();

            }

但是rowData.isSelected似乎不起作用，有人可以提供帮助。

发生的事情是，当您单击ListView图像项时，单击事件会命中父项，然后将isSelected设置为true（如果为false），然后调用setState（{}），因此应更改图像。继续显示tick.png图片。