单击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
    }
}

这是我的renderFile：

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

这是listView的项目

_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

如何为图像添加参考？

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
})
}