堆栈导航 - 未定义函数问题答案

【问题标题】：Stack Navigation - Undefined Function issue堆栈导航 - 未定义函数问题
【发布时间】：2018-12-14 05:29:29
【问题描述】：

StackNavigation 导致我在屏幕中附加了以下崩溃。在装有 Android 6 版本的 HTC one M8 中执行该应用程序。请找到以下代码，请帮助我解决此问题：

  App.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import  { Login } from './infoscreens/Login';
import  { ListInfo } from './infoscreens/ListInfo';
import { createStackNavigator, createAppContainer } from 'react-navigation';
const RootStack = createStackNavigator(
  {
    Login: {
      screen: Login,
    },
    ListInfo: {
      screen: ListInfo,
    },
  },
  {
    initialRouteName: 'Login',
  }
);
const AppContainer = createAppContainer(RootStack);
export default class App extends Component {
  render() {
    return (
      <AppContainer />
    );
  }
}

    Login.js

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

export class Login extends React.Component {
  render() {
    return (
      <View>
        <Text>This is the Login screen</Text>
        <Button
        title="Go to Details"
        onPress={() => this.props.navigation.navigate('ListInfo')}
      />
      </View>
    )
  }
};

export default Login;

    ListInfo.js:

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

export class ListInfo extends React.Component {
  render() {
    return (
      <View>
        <Text>This is the Login screen</Text>
      </View>
    )
  }
};

export default ListInfo;

                Package.JSON

{
  "name": "ReactScreenNavigation",
  "version": "0.0.3",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.3",
    "react-native": "0.57.8",
    "react-navigation": "^3.0.8"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.48.5",
    "react-test-renderer": "16.6.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

【问题讨论】：

你确定你使用的是react-navigation版本1.x ??上面的代码看起来与此类似。从版本 2.x 及更高版本开始，API 已更改。您可以在https://reactnavigation.org/en/ 参考新文档
使用 createStackNavigator 更新了代码，但我仍然面临问题
问题已解决。我在 package.json 中设置了 "react-navigation": "2.13.0" ，然后 StackNavigation 可以正常工作。能导航

标签： reactjs react-native react-router

【解决方案1】：

您应该使用 createStackNavigator，而不是 stackNavigator。

【讨论】：

使用 createStackNavigator 更新了代码，但我仍然面临问题