React Native：如何從父級的事件函數中調用子級引用？

Question

嘗試將父標記設為<TouchableWithoutFeedback>並將子標記設為<TouchableWithoutFeedback> <Image> ，嘗試從父onPress函數更改圖像源，但會出錯。 如何使用ref存檔？ 或其他解決方法？

本機版本：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

使用nativeProps試試，例如

import resolveAssetSource from 'resolveAssetSource';

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

參照此為多。

它可能不適用於本機0.50+版本，但根據此注釋，它應適用於0.57.1

Answer 2

最好通過調用setState方法來完成React中元素的屬性更新。 嘗試以下

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