React Native: Как вызвать дочерних реферов из функции родительского события?

Question

Родительский тег имеет значение <TouchableWithoutFeedback>, а дочерний - <Image>, пытаясь изменить источник изображения из родительской функции onPress, но получая ошибку.как я могу заархивировать это с помощью ссылок?или любой другой способ ее устранения?

Реактивная версия: 0.56

Ошибка:

Cannot read property 'favIcon' of undefined

Пример кода:

const fav = require('../../images/favorite.png');
const nonfav = require('../../images/not_favorite.png');

updateFavorite = (id) => {
    this.props.refs.favIcon.source(fav);      
}

render(){
  return (
    <View style={styles.container}>                
       <TouchableWithoutFeedback onPress={ this.updateFavorite.bind(this, 1) }>
         <View style={ styles.imageView }>
           <Image refs="favIcon" source={ nonfav } />                   
         </View>
       </TouchableWithoutFeedback>
       <TouchableWithoutFeedback onPress={ this.updateFavorite.bind(this, 2) }>
         <View style={ styles.imageView }>
           <Image refs="favIcon" source={ nonfav } />                   
         </View>
       </TouchableWithoutFeedback>
   </View>
  )
}

Примечание : изменить только дочернее изображение onPressed, а не все изображения.

Answer 1

Обновление свойств элементов в React лучше всего вызывать методом setState.Попробуйте следующее

updateFavorite = (event) => {
  event.target.setAttribute('src', fav)
}

render(){
  return (
    <View style={styles.container}>       
       <TouchableWithoutFeedback>
         <View style={ styles.imageView }>
           <img ref={ref => this.favIcon = ref} src={nonFav} onPress={ this.updateFavorite }/>                   
         </View>
       </TouchableWithoutFeedback>         
       <TouchableWithoutFeedback>
         <View style={ styles.imageView }>
           <img ref={ref => this.favIcon = ref} src={nonFav} onPress={ this.updateFavorite } />                   
         </View>
       </TouchableWithoutFeedback>
   </View>
  )
}

Answer 2

попробуйте, используя nativeProps, например

import resolveAssetSource from 'resolveAssetSource';

this.refs['favIcon'].setNativeProps({
   src: [resolveAssetSource(fav)]
});

. Для получения дополнительной информации см. this .

Может не работать с версиями реагирования 0.50+, но согласно этот комментарий, с которым он должен работать 0.57.1