React Native 导航 - 未定义不是对象

Question

我是 React Native 的新手，我尝试按照教程学习，但是无法在屏幕之间进行导航。我以前在一个屏幕上可以正常工作，但是在添加导航时出现错误。

关注这个：https://facebook.github.io/react-native/releases/next/docs/navigation.html

给我这样的代码：

import React from 'react';
import {
  StackNavigator,
} from 'react-navigation';

export default class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Button
        title="Go to Jane's profile"
        onPress={() =>
          navigate('Profile', { name: 'Jane' })
        }
      />
    );
  }
}

class ProfileScreen extends React.Component {
  static navigationOptions = {
    title: 'Profile',
  };
  render() {
    return (
      <Button title="do nothing"/>
    );
  }
}

const App = StackNavigator({
  Home: { screen: HomeScreen },
  Profile: { screen: ProfileScreen },
});

尝试运行此程序（通过 expo 应用程序）会导致错误

undefined 不是对象（评估 'this.props.navigation.navigate'）

那么我的导航是否正确？如何解决这个错误？

Answer 1

您需要在您的应用程序中使用 AppRegistry.registerComponent。 一个很好的方法是创建一个 src 目录，然后在那里创建 2 个 js 文件，HomeScreen 和 ProfileScreen。然后在与您的 index.android.js 或 index.ios.js 相同的级别上创建和 App.js 并包含这两个文件并声明 StackNavigator 就像您在代码中所做的那样，而不是 const App 你需要有 const NameOfYourApp，其中 NameOfYourApp 是你在运行 create-react-native-app 时命名项目的方式。（如果是 App，就这样吧） 然后你需要在最后加上这一行，AppRegistry.registerComponent('NameOfYourApp', () => NameOfYourApp);

import React from 'react';
import {
  StackNavigator,
} from 'react-navigation';
import HomeScreen from './src/HomeScreen'
import ProfileScreen from './src/ProfileScreen'

const NameOfYourApp = StackNavigator({
  Home: { screen: HomeScreen },
  Profile: { screen: ProfileScreen },
});
AppRegistry.registerComponent('NameOfYourApp', () => NameOfYourApp)

最后一步是在 index.android.js 或 index.ios.js 中导入 App.js 文件

import './App';