找不到变量：使用 react-navigation 导航

Question

我在同一个 index.android.js 文件中有这个简单的代码：

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View,
  Button
} from 'react-native';
import {StackNavigator} from 'react-navigation';

// First Page
class FirstPage extends Component {
  static navigationOptions = {
    title: 'Welcome',
  };

  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello First Page</Text>
        <Button 
          onPress={() => navigate('SecondPage')}
          title="Go to second page"
        />
      </View>
    );
  }
}

// Second Page
class SecondPage extends Component {
  static navigationOptions = {
    title: 'Second Page',
  };

  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello Second Page</Text>
        <Button 
          onPress={() => navigate('FirstPage')}
          title="Go to first page"
        />
      </View>
    );
  }
}


const SimpleApp = StackNavigator({
  FirstPage: { screen: FirstPage},
  SecondPage: { screen: SecondPage},
});

AppRegistry.registerComponent('MoviesTickets_YCH', () => FirstPage);

我想要的只是在屏幕之间导航，但我收到错误消息：找不到变量：导航，我不知道为什么会发生这种情况，知道怎么做吗？

谢谢你的帮助

Answer 1

在 render 方法中添加以下内容：

const {导航} =this.props.navigation;

你的渲染应该是这样的

render(){
const {navigate} =this.props.navigation;
return (
  .... ) ;
}

在您使用的每个组件中导航。有关更多信息，请按照文档进行操作，这很容易。 反应导航