我在Stack Overflow中看到的每个例子都使用了App
组件是一个功能组件的情况,但我使用的是基于类的App
组件,我正在追赶React Navigation的重大变化。
这是我在App.js
文件中的代码:
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import {
createBottomTabNavigator,
createStackNavigator
} from "react-navigation";
import AuthScreen from "./screens/AuthScreen";
import WelcomeScreen from "./screens/WelcomeScreen";
import MapScreen from "./screens/MapScreen";
import DeckScreen from "./screens/DeckScreen";
import SettingsScreen from "./screens/SettingsScreen";
import ReviewScreen from "./screens/ReviewScreen";
export default class App extends React.Component {
render() {
const MainNavigator = createBottomTabNavigator({
welcome: WelcomeScreen,
auth: AuthScreen,
main: {
screen: createBottomTabNavigator({
map: MapScreen,
deck: DeckScreen,
review: {
screen: createStackNavigator({
review: ReviewScreen,
settings: SettingsScreen
})
}
})
}
});
return (
<View style={styles.container}>
<MainNavigator />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
justifyContent: "center"
}
});
我正在很好地重构它然后它打破了这个我无法弄清楚的消息:
不变违规:此导航器缺少导航道具。在react-navigation 3中,您必须直接设置应用容器。
是的,我查看了有关AppContainer
的React Native文档,我看到了这行代码
const AppContainer = createAppContainer(AppNavigator);
但我不确定如何重构地雷或不重构太多以使这一点正确。
当我尝试在我的文件底部添加这行代码export default createAppContainer(App);
并且显然从export default
前面移除class App...
并从createAppContainer
中取出react-navigation
时,我收到一条错误消息:
TypeError:undefined不是对象
像这样设置createAppContainer
import AuthScreen from "./screens/AuthScreen";
import WelcomeScreen from "./screens/WelcomeScreen";
import MapScreen from "./screens/MapScreen";
import DeckScreen from "./screens/DeckScreen";
import SettingsScreen from "./screens/SettingsScreen";
import ReviewScreen from "./screens/ReviewScreen";
import { createBottomTabNavigator, createStackNavigator, createAppContainer } from 'react-navigation';
const MainNavigator = createAppContainer(createBottomTabNavigator({ // set createAppContainer here
welcome: WelcomeScreen,
auth: AuthScreen,
main: {
screen: createBottomTabNavigator({
map: MapScreen,
deck: DeckScreen,
review: {
screen: createStackNavigator({
review: ReviewScreen,
settings: SettingsScreen
})
}
})
}
}));
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<MainNavigator />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
justifyContent: "center"
}
});