javascript - react-native-navigation V3导致应用程序崩溃

你好，我正在尝试导航到我的本机应用程序中，该应用程序无法启动，并且在启动时显示此错误....（0，_reactNavigation.StackNavigator）不是一个功能...！
以下代码通常是从此博客https://appdividend.com/2018/03/20/react-native-navigation-example-tutorial/#Create_two_screens_for_our_projecte粘贴而来的副本
 。我知道由于反应导航的V3更新，您必须在导出之前将StackNavigator包装在createAppContainer函数中，所以我在这里还有什么错呢！

//the app.js code

import React, {Component} from 'react';

import {Platform, StyleSheet, Text, View} from 'react-native';
import {StackNavigator, createAppContainer} from 'react-navigation';
import Settings from './firstScreen';
import Home from './secondScreen';
import AppNavigator from './navigationControl';



export default class App extends Component {
  render() {
    return (<AppNavigator/>);
  }
}

//the navigationControls.js code
import React, {Component} from 'react';

import {Platform, StyleSheet, Text, View} from 'react-native';
import {StackNavigator, createAppContainer} from 'react-navigation';
import Settings from './firstScreen';
import Home from './secondScreen';

const AppNavigator = StackNavigator({
  SettingScreen: {
    screen: Settings
  },
  HomeScreen: {
    screen: Home
  }
});

export default createAppContainer(AppNavigator);

//the firstScreen.js code
import React, {Component} from 'react';
import {View, Text, Button} from 'react-native';

export class Settings extends Component {
  render() {
    return (
      <View>
        <Text>This is the Settings screen</Text>

      </View>
    )
  }
};

export default Settings;

//the scondScreen.js code

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

export class Home extends Component {
  render() {
    return (
      <View>
        <Text>This is the home screen</Text>

      </View>
    )
  }
}

export default Home;

//package.json file
{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^34.0.1",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
    "react-native-gesture-handler": "~1.3.0",
    "react-native-reanimated": "~1.1.0",
    "react-native-web": "^0.11.4",
    "react-navigation": "^3.12.1"
  },
  "devDependencies": {
    "babel-preset-expo": "^6.0.0"
  },
  "private": true
}

最佳答案

将StackNavigator更改为createStackNavigator

取代这个

import {StackNavigator, createAppContainer} from 'react-navigation

对此

import {createStackNavigator, createAppContainer} from 'react-navigation';

使用这样的东西

 import {createStackNavigator, createAppContainer} from 'react-navigation'; const MainNavigator = createStackNavigator({
Home: {screen: HomeScreen},
Profile: {screen: ProfileScreen}, });
const App = createAppContainer(MainNavigator);
export default App;

删除Home and Setting类前面的export，因为您已经在该类的底部添加了export default