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

Question

你好，我正在尝试在我的 React native 应用程序中实现导航，该应用程序无法启动，当它启动时显示此错误.... (0，_reactNavigation.StackNavigator) 不是函数... !! 下面的代码大部分是从这个博客中复制粘贴的https://appdividend.com/2018/03/20/react-native-navigation-example-tutorial/#Create_two_screens_for_our_projecte .我知道由于 react-navigation 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