Нарушение инварианта: для этого навигатора отсутствует навигационная опора (проблема с контейнером приложения?)
Я хочу добавить регистрацию в свое приложение с помощью этого учебного пособия, но я получаю это сообщение, когда пытаюсь запустить свое собственное приложение реагировать:
Нарушение инварианта: для этого навигатора отсутствует навигационная опора. В реакции-навигации 3 вы должны настроить контейнер приложения напрямую. Дополнительная информация: https://reactnavigation.org/docs/en/app-containers.html
Я думаю, что отсутствует контейнер приложения, но мне нужна помощь, чтобы добавить один, я много чего пробую, но ничего не делаю.
Моя навигация:
import React from "react";
import { Platform, StatusBar } from "react-native";
import { createAppContainer, createStackNavigator, createBottomTabNavigator, createSwitchNavigator } from "react-navigation";
import { FontAwesome } from "react-native-vector-icons";
import SignUp from "./screens/SignUp";
import SignIn from "./screens/SignIn";
import Home from "./screens/Home";
import Profile from "./screens/Profile";
const headerStyle = {
marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
};
export const SignedOut = createStackNavigator({
SignUp: {
screen: SignUp,
navigationOptions: {
title: "Sign Up",
headerStyle
}
},
SignIn: {
screen: SignIn,
navigationOptions: {
title: "Sign In",
headerStyle
}
}
});
export const SignedIn = createBottomTabNavigator(
{
Home: {
screen: Home,
navigationOptions: {
tabBarLabel: "Home",
tabBarIcon: ({ tintColor }) => (
<FontAwesome name="home" size={30} color={tintColor} />
)
}
},
Profile: {
screen: Profile,
navigationOptions: {
tabBarLabel: "Profile",
tabBarIcon: ({ tintColor }) => (
<FontAwesome name="user" size={30} color={tintColor} />
)
}
}
},
{
tabBarOptions: {
style: {
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
}
}
}
);
export const createRootNavigator = (signedIn = false) => {
return createSwitchNavigator(
{
SignedIn: {
screen: SignedIn
},
SignedOut: {
screen: SignedOut
}
},
{
initialRouteName: signedIn ? "SignedIn" : "SignedOut"
}
);
};
Мой индексный файл:
import React from "react";
import { createRootNavigator } from "./router";
import { isSignedIn } from "./auth";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
signedIn: false,
checkedSignIn: false
};
}
componentDidMount() {
isSignedIn()
.then(res => this.setState({ signedIn: res, checkedSignIn: true }))
.catch(err => alert("An error occurred"));
}
render() {
const { checkedSignIn, signedIn } = this.state;
// If we haven't checked AsyncStorage yet, don't render anything (better ways to do this)
if (!checkedSignIn) {
return null;
}
const Layout = createRootNavigator(this.state.signedIn);
return <Layout />; //erreur ici
}
}