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 },
});

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

undefined不是一个对象（评估＆＃39; this.props.navigation.navigate＆＃39;）

我正在正确导航，如何解决此错误？

Answer 1

您需要在App中使用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（＆＃39; NameOfYourApp＆＃39;，（）=＆gt; 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';

React Native导航 - undefined不是对象

1 个答案: