Question

我正在尝试学习反应导航和本机反应。我一直在尝试修复此代码已有一段时间，但是在snack.expo.io上，它如何一直给我这个错误，createNavigationContainer() has been removed use createAppContainer instead

这是我的简单代码，可用来获取第一个stacknavigator

import React from "react";
import {createStackNavigator, createAppContainer} from "react-navigation";
import {View, Text, Button} from "react-native";


class screencomponentone extends React.Component {
  render (){
    return (
      <View style=
      {{flex: 1,
        alignItems: "center" ,
        justifyContent: "center",
        borderWidth: 25,
        borderColor: "red"}}>
        <Button title= "go to screen 2" onPress = {() => {
          this.props.navigation.navigate("routetwo");
        }}/>
      </View>
    );
  }
}


class screencomponenttwo extends React.Component {
  render (){
    return (
      <View style=
      {{flex: 1,
        alignItems: "center" ,
        justifyContent: "center",
        borderWidth: 25,
        borderColor: "blue"}}>
        <Button title= "go to screen 1" onPress = {() => {
          this.props.navigation.navigate("routeone");
        }}/>
      </View>
    );
  }
}



const AppNavigator = createStackNavigator({
  "routeone" : screencomponentone,
  "routetwo" : screencomponenttwo,
})

//cause of error using old code of lecture refered from docs https://reactnavigation.org/docs/en/app-containers.html
const AppContainer = createAppContainer(AppNavigator);


export default class App extends React.Component {
  render () {
    return <AppContainer />
  }
}

但是以某种方式，尽管在代码中没有使用createNavigationContainer代替它，它仍然一直给我这个错误

Answer 1

在React Navigation 4版本中，他们更改了导入

请更改此

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

收件人

import { createAppContainer } from '@react-navigation/native';
import { createStackNavigator } from 'react-navigation-stack';

添加到package.json

"react-navigation": "4.0.0",
"react-navigation-stack": "1.5.1",
"@react-navigation/core": "^3.5.0",
"@react-navigation/native": "^3.6.2"

小吃链接： https://snack.expo.io/@mehran.khan/navigation

Answer 2

@OP，我遇到了完全相同的问题。我从项目根文件夹中运行了以下文件，它解决了我的问题。

npm我反应导航堆栈-保存

Answer 3

您可以更改

const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;

createNavigationContainer（）已被删除错误

3 个答案: