Fur*_*mal 0 react-native react-navigation
我正在尝试学习反应导航和反应本机。我一直在努力,现在解决了一段时间这个代码,但它的一些如何不断给我这个错误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 />
}
}
Run Code Online (Sandbox Code Playgroud)
但是以某种方式尽管没有在代码中使用createNavigationContainer却一直给我这个错误
小智 7
在React Navigation 4版本中,他们更改了导入
请改变这个
import {createStackNavigator, createAppContainer} from "react-navigation";
Run Code Online (Sandbox Code Playgroud)
至
import { createAppContainer } from '@react-navigation/native';
import { createStackNavigator } from 'react-navigation-stack';
Run Code Online (Sandbox Code Playgroud)
加入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"
Run Code Online (Sandbox Code Playgroud)
小吃链接: https : //snack.expo.io/@mehran.khan/navigation
| 归档时间: |
|
| 查看次数: |
1961 次 |
| 最近记录: |