在 react-native 中单击时更新 listView 项目的图像

Question

这是我的 ListView 中的一项

如果您看到右侧有一个灰色圆圈。这里我要

当我点击这张图片时，它应该变成这样：

在这里我可以单独做，但它不会在列表视图中发生，这是我的代码：

constructor(props) {
    super();
    super(props);
    const dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1.guid != r2.guid});
    this.state = {
        dataSource: dataSource.cloneWithRows(productArray),
        isLoading: true,
        item1Check: true,
        item2Check: true
    }
}

这是我的渲染文件：

 <ListView
      style={{paddingBottom: 40}}
      dataSource={this.state.dataSource}
      enderRow={(item, rowID) => this._renderMenuItem(item, rowID)}/>

这是列表视图的项目

_renderMenuItem(item, rowID) {
    var imgSource1 = this.state.item1Check? checkImg : crossImg;
    var imgSource2 = this.state.item2Check? checkImg : crossImg;
    console.log("sfsd1121212asas",rowID,this.state.item1Check,item.p1id)
    return (
        <View style={{
            flex: 1, borderBottomWidth: 0, flexDirection: 'column', alignItems: 'center',
            marginBottom: 25, marginRight: 10, marginLeft: 10
        }}>
            <Item style={[styles.squareLayout, {marginBottom: 8}]}>
                <CachedImage source={{uri: '../orange.jpg'}}
                       style={{
                           width: 100, height: 100, borderRadius: 10, overflow: 'hidden',
                           borderColor: AppColors.grey2, borderWidth: 1
                       }}/>
                <Item style={{
                    flex: 3,
                    flexDirection: 'column',
                    borderBottomWidth: 0,
                    justifyContent: 'center',
                    alignItems: 'center',
                    alignSelf: 'center'
                }}>
                    <Text style={{
                        flex: 1, fontFamily: AppStyles.fontFamily, fontSize: 10, color: AppColors.grey1,
                        justifyContent: 'flex-start', alignItems: 'flex-start', alignSelf: 'flex-start',
                        paddingLeft: 8, paddingTop: 8
                    }} numberOfLines={1}>Our Apple fruit is Fresh, Delicious and crunchy. It is one of the most
                        popular fruit, favorite of health conscious, fitness lovers who believe in the concept
                        “health is wealth. The fresh Himachal apples are exported worldwide directly from farms at
                        very competitive prices.</Text>
                    <Text style={{
                        flex: 4, fontFamily: AppStyles.fontFamilyMedium, fontSize: 16, color: AppColors.black,
                        justifyContent: 'center', alignItems: 'center', alignSelf: 'flex-start',
                        paddingLeft: 8, paddingBottom: 8
                    }} numberOfLines={3}>Apple</Text>
                </Item>
                <Item style={{
                    flex: 1,
                    borderBottomWidth: 0,
                    justifyContent: 'flex-start',
                    alignItems: 'flex-start',
                    alignSelf: 'center'
                }}>
                    <TouchableHighlight onPress={ () => this.setState({item1Check : !this.state.item1Check})}>
                        <Image source={this.state.item1Check ? require('../../assets/images/small_check_circle.png') : require('../../assets/images/small_x_circle.png')} />
                    </TouchableHighlight>
                </Item>
            </Item>
            <Item style={[styles.squareLayout]}>
                <CachedImage source={{uri:'../apple.jpg'}}
                       style={{
                           width: 100,
                           height: 100,
                           borderRadius: 10,
                           overflow: 'hidden',
                           borderWidth: 1,
                           borderColor: AppColors.grey2
                       }}/>
                <Item style={{
                    flex: 3,
                    flexDirection: 'column',
                    borderBottomWidth: 0,
                    justifyContent: 'center',
                    alignItems: 'center',
                    alignSelf: 'center'
                }}>
                    <Text style={{
                        flex: 1, fontFamily: AppStyles.fontFamily, fontSize: 10, color: AppColors.grey1,
                        justifyContent: 'flex-start', alignItems: 'flex-start', alignSelf: 'flex-start',
                        paddingLeft: 8, paddingTop: 8
                    }} numberOfLines={1}> 20 Carton/Cartons Navel Orange</Text>
                    <Text style={{
                        flex: 4, fontFamily: AppStyles.fontFamilyMedium, fontSize: 16, color: AppColors.black,
                        justifyContent: 'center', alignItems: 'center', alignSelf: 'flex-start',
                        paddingLeft: 8, paddingBottom: 8
                    }} numberOfLines={3}>Oranges</Text>
                </Item>
                <Item style={{
                    flex: 1,
                    borderBottomWidth: 0,
                    justifyContent: 'flex-start',
                    alignItems: 'flex-start',
                    alignSelf: 'center'
                }}>
                    <TouchableHighlight onPress={ () => this.setState({item2Check : !this.state.item2Check})}>
                    <Image source={this.state.item2Check ? require('../../assets/images/small_x_circle.png') : require('../../assets/images/small_x_circle.png')} />
                    </TouchableHighlight>
                </Item>
            </Item>
        </View>
    );
}

}

这是我尝试更新图像的主要代码：

<TouchableHighlight onPress={ () => this.setState({item1Check : !this.state.item1Check})}>
                        <Image source={this.state.item1Check ? require('../../assets/images/small_check_circle.png') : require('../../assets/images/small_x_circle.png')} />
                    </TouchableHighlight>

Answer 1

给图片添加 ref 怎么样？

import resolveAssetSource from 'resolveAssetSource';

...

<TouchableHighlight onPress={ () => this.setState({item1Check : !this.state.item1Check})}>
                        <Image ref="list1img" source={this.state.item1Check ? require('../../assets/images/small_check_circle.png') : require('../../assets/images/small_x_circle.png')} />
                    </TouchableHighlight>

并检测组件的变化，然后通过参考更改图像。

componentDidUpdate(){

   this.handleCheck();

}

handleCheck(){
   var img = this.state.item1Check ? require('pathforimage') : require('anotherpathforimage');
   this.refs['list1img'].setNativeProps({
   src: [resolveAssetSource(img)] //use source for ios instead of src
})
}