react-native-navigation V3使应用程序崩溃

Question

你好，我试图实现导航到我的本机应用程序，该应用程序无法启动，当它出现时它显示此错误....（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
}

Answer 1

将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和Setting类前面的export ，因为您已在类的底部添加了export default

Answer 2

你做过npm安装吗？

npm install 

如果您已经完成了现有项目，那么您需要这样做。