首页 文章

React Native导航 - undefined不是对象

提问于
浏览 次
0

我是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不是对象（评估'this.props.navigation.navigate'）

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

javascript react-native navigation

1 回答

  • 0

    您需要在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（'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';
    回复于

相关问题