React Native Navigation const {navigate} = this.props.navigation;

Я изучаю react-native навигация https://reactnavigation.org/docs/intro/. Я вижу в примерах там

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat')}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

Я не мог понять, что именно эта строка кода для const { navigate } = this.props.navigation;

Ответы

Ответ 1

Синтаксис

не имеет ничего общего с React Native он называется Назначение деструктурирования в es6/es2015

const { navigate } = this.props.navigation;

эквивалентен с исключением var и const.

var navigate = this.props.navigation.navigate

пример без Destructuring должен выглядеть следующим образом

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => this.props.navigation.navigate('Chat')}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

Ответ 2

Включите в свой ServiceAction this.props.navigation что-то вроде этого:

<HomeScreen navigation={this.props.navigation}/>

потому что props.navigation по умолчанию на вашем родительском компоненте

и на компоненте HomeScreen вы получите доступ к навигации, как:

..
goToSignUp() {
   this.props.navigation.navigate('SignUp');
}
..

Для меня также смущало раньше. Ура!