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

Question

我正在学习 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;

Answer 1

语法与 React Native 无关它在 es6 / es2015

中被称为 Destructuring assignment

const { navigate } = this.props.navigation;

等同于 var 和 const 除外。

var navigate = this.props.navigation.navigate

没有解构的例子应该是这样的

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

Answer 2

在您的 ServiceAction 中包含 this.props.navigation 类似这样的内容：

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

因为 props.navigation 默认情况下在您的父组件上

在 HomeScreen 组件上，您将像这样访问导航：

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

之前对我来说也是一头雾水。干杯！

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

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

react-native

react-navigation