React Native ref / ссылка на Компонент не работает

Question

Я занимаюсь разработкой приложения React Native.Что я делаю сейчас в своем приложении, так это то, что я пытаюсь использовать ссылку / ссылку на свой компонент.

Это мой код

class Gallery extends React.Component {
  constructor(props) {
    super(props);

  }

  _handleDownloadButton = () => {
    var uri = this.refs.logoImage.props.source;
    var promise = CameraRoll.saveImageWithTag(uri);
    promise.then(function(result) {
      console.log('save succeeded ' + result);
      Alert.alert('Saved')
    }).catch(function(error) {
      console.log('save failed ' + error);
      Alert.alert('Error')
    });
  }

  render() {
    return (
      <View>
        <Button
        onPress={() => {
          this._handleDownloadButton();
        }}
        title="Download photo">
        </Button>
        <Image ref="logoImage" style={{ width: 100, height: 100 }} source={{ uri: 'https://static.standard.co.uk/s3fs-public/thumbnails/image/2016/05/22/11/davidbeckham.jpg?w968' }} />
      </View>
    );
  }
}

export default Gallery;

Когда я нажимаю кнопку загрузки, яполучил следующую ошибку.

Cannot find property source of undefined

Я тоже это пробовал.

<Image ref={ref => this.image = ref} style={{ width: 100, height: 100 }} source={{ uri: 'https://static.standard.co.uk/s3fs-public/thumbnails/image/2016/05/22/11/davidbeckham.jpg?w968' }} />

с

var uri = this.image.props.source;

Я получил ту же ошибку.Я тоже это попробовал.

В конструкторе я добавил

this.image = React.createRef();

компонент

<Image ref={this.image} style={{ width: 100, height: 100 }} source={{ uri: 'https://static.standard.co.uk/s3fs-public/thumbnails/image/2016/05/22/11/davidbeckham.jpg?w968' }} />

с

var uri = this.image.props.source;

Answer 1

Измените это

 onPress={() => {
          this._handleDownloadButton();
        }}

на

onPress={this._handleDownloadButton}             

Answer 2

Вы используете строковые ссылки, которые рассматриваются как устаревшие и имеют некоторые проблемы .

Вот модифицированный код того, как вы используете новый подход с createRef.

class Gallery extends React.Component {
  constructor(props) {
    super(props);
    this.image = createRef();
  }

  _handleDownloadButton = () => {
    const imageRef = this.image.current;
    if (imageRef) {
      const url = imageRef.props.source;
    }
  }

  render() {
    return (
      <View>
        <Image ref={this.image} style={{ width: 100, height: 100 }} source={{ uri: 'https://static.standard.co.uk/s3fs-public/thumbnails/image/2016/05/22/11/davidbeckham.jpg?w968' }} />
      </View>
    );
  }
}

export default Gallery;