Обновлять изображения элемента 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
})
}