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