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

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

Answer 2

在您的ServiceAction中加入this.props.navigation，如下所示：

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

因为props.navigation默认位于您的父组件上

在主屏幕组件上，您将访问以下导航：

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

对我来说也很困惑。干杯!