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

在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;

2 个答案: