React Native navigation - undefined 不是一个对象

Question

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

在此之后： 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 },
});

尝试运行此命令(通过博览会应用程序(会导致错误

undefined不是一个对象(评估'this.props.navigation.navigate'(

那么我是否正确进行导航以及如何解决此错误？

Answer 1

您需要在应用程序中使用 AppRegistry.registerComponent。一个很好的方法是创建一个src目录，然后在那里创建2个js文件，主屏幕和配置文件屏幕。然后创建 和 App.js 与 index.android.js 或 index.ios 在同一级别.js并包含这两个文件并声明 StackNavigator，就像您在代码中所做的那样，但您需要使用 const NameOfYourApp，而不是 const App，其中 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)

最后一步是将您的 App.js 文件导入 index.android.js 或 index.ios.js

import './App';