Реагировать на навигацию по нажатию в собственной функции

Я реализовал пример React Navigation, как в учебнике https://reactnavigation.org/docs/intro/ и все работает нормально.

<Button
  onPress={() => navigate('Chat')}
  title="Chat with Lucy"
/>

Вместо прямого вызова навигации в onPress я хочу вызвать его в отдельной функции btnToChat. Я пытался вызвать его с помощью this.props.navigation.navigate, но он не работает. Есть ли у вас какие-либо предложения? Спасибо!

btnToChat(){
  console.log("test");
  this.props.navigation.navigate('Chat');    
}
render() {
  const { navigate } = this.props.navigation;
return (
  <View>
    <Button
      onPress={this._btnToChat}
    />
  </View>
    );
  }
}

Появляется следующая ошибка: undefined не является объектом (оценка this.props.navigation)


react-native reactjs react-native-navigation native
person frazer87    schedule 14.06.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Все в порядке, вам просто нужно привязать _btnToChat метод для доступа (правильный контекст) this ключевого слова внутри него.

Нравится:

btnToChat = () => {                      //here use arrow  function
    console.log("test");
    this.props.navigation.navigate('Chat');    
}

render() {
    const { navigate } = this.props.navigation;
    return (
        <View>
            <Button
                onPress={this._btnToChat}
            />  
        </View>
    );
}

Или определите привязку метода _btnToChat внутри constructor:

constructor(){
   super();
   this._btnToChat = this._btnToChat.bind(this);
}

btnToChat (){           
    console.log("test");
    this.props.navigation.navigate('Chat');    
}

render() {
    const { navigate } = this.props.navigation;
    return (
        <View>
            <Button
                onPress={this._btnToChat}
            />  
        </View>
    );
}
person Mayank Shukla    schedule 14.06.2017