Я не могу перемещаться между вложенными стеками.
Я проследил маршрут от RootStackScreen обратно ко всем различным экранам, которые я хочу отобразить.
Никаких проблем с pu sh, всплывающими или возвращающимися вокруг экранами в одном стеке, но я не могу перемещаться между ними, когда один отображается изначально.
Блокирует ли useStates меня от навигации между стеками или что-то еще мне не хватает?!
Заранее спасибо.
import React, {useState, useEffect} from 'react';
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import Icon from 'react-native-vector-icons/Feather'
import firebase from 'firebase'
// Screens
// Modal
import Modal from '../screens/modal';
// Onboarding
import OnboardingOne from '../screens/onboardingOne'
import OnboardingTwo from '../screens/onboardingTwo'
import OnboardingThree from '../screens/onboardingThree'
import OnboardingFour from '../screens/onboardingFour'
import SignIn from '../screens/signIn'
import CreateUser from '../screens/createUser'
import OnboardingUser from '../screens/onboardingUser'
// Loading
import Loading from '../screens/loading'
// Tabs
import HomeScreen from '../screens/home'
import AboutScreen from '../screens/about'
import OrganisationScreen from '../screens/organisation'
// Profile
import ProfileScreen from '../screens/profile'
import SignOutScreen from '../screens/signOut'
const OnboardingStack = createStackNavigator();
const OnboardingStackScreen = () => (
<OnboardingStack.Navigator
headerMode='screen'
screenOptions={{animationEnabled: true}}
initialRouteName="OnboardingUser" >
<OnboardingStack.Screen
name="OnboardingOne"
component={OnboardingOne}
options={{
headerTitle: 'Onboarding One',
}}
/>
<OnboardingStack.Screen
name="OnboardingTwo"
component={OnboardingTwo}
options={{
headerTitle: 'OnboardingTwo'
}}
/>
<OnboardingStack.Screen
name="OnboardingThree"
component={OnboardingThree}
options={{
headerTitle: 'OnboardingThree'
}}
/>
<OnboardingStack.Screen
name="OnboardingFour"
component={OnboardingFour}
options={{
headerTitle: 'Onboarding Four'
}}
/>
<OnboardingStack.Screen
name="SignIn"
component={SignIn}
options={{
headerTitle: 'Sign in'
}}
/>
<OnboardingStack.Screen
name="CreateUser"
component={CreateUser}
options={{
headerTitle: 'Create User'
}}
/>
<OnboardingStack.Screen
name="OnboardingUser"
component={OnboardingUser}
options={{
headerTitle: 'Onboarding User',
}}
/>
</OnboardingStack.Navigator>
);
const ProfileStack = createStackNavigator();
const ProfileStackStackScreen = () => (
<ProfileStack.Navigator headerMode='screen' screenOptions={{animationEnabled: true}} >
<ProfileStack.Screen
name="Profile"
component={ProfileScreen}
options={{
headerTitle: 'Profile Screen',
}}
/>
<ProfileStack.Screen
name="SignOut"
component={SignOutScreen}
options={{
headerTitle: 'Sign Out',
}}
/>
</ProfileStack.Navigator>
);
const AppTabs = createBottomTabNavigator()
const AppTabsScreen = () => (
<AppTabs.Navigator
initialRouteName="Home"
tabBarOptions={{
activeTintColor: 'orange',
inactiveTintColor: 'gray',
}}>
<AppTabs.Screen name="Home" component={HomeScreen} options={{
tabBarLabel: "Hem",
tabBarIcon: props => <Icon name="home"
size={props.size}
color={props.color}/>
}}/>
<AppTabs.Screen name="About" component={AboutScreen} options={{
tabBarLabel: "Om",
tabBarIcon: props => (
<Icon name="feather"
size={props.size}
color={props.color}/>)
}}/>
<AppTabs.Screen name="Organisation" component={OrganisationScreen} options={{
tabBarLabel: "Organisationer",
tabBarIcon: props => <Icon name="list"
size={props.size}
color={props.color}/>
}}/>
<AppTabs.Screen name="Profile" component={ProfileStackStackScreen} options={{
tabBarLabel: "Profile",
tabBarIcon: props => <Icon name="user"
size={props.size}
color={props.color}/>
}}/>
</AppTabs.Navigator >
);
const RootStack = createStackNavigator();
const RootStackScreen = () => {
const [isLoading, setIsLoading] = useState(true)
const [isLoggedIn, setLoggedIn] = useState(false)
// Do we have a user?
var user = firebase.auth().currentUser;
// Set wait time for loading screen
useEffect(() => {
setIsLoading(!isLoading)
}, [])
return (
<RootStack.Navigator
headerMode="none"
screenOptions={{ animationEnabled: false }}
mode="modal">
{isLoading ? (
<RootStack.Screen name="Loading" component={Loading} />
) : !isLoggedIn ? (
<RootStack.Screen name="AppDrawerScreen" component={OnboardingStackScreen} />
) : (
<RootStack.Screen name="TabHomeScreen" component={AppTabsScreen} />
)}
<RootStack.Screen
name="Modal"
component={ Modal }
options={{ animationEnabled: true }}
/>
<RootStack.Screen
name="Alert"
component={ Modal }
options={{
animationEnabled: true,
cardStyle: { backgroundColor: 'rgba(0,0,0,0.15)'},
cardOverlayEnabled: true,
cardStyleInterpolator: ({current: { progress }}) => {
return{
cardStyle: {
opacity: progress.interpolate({
inputRange: [0, 0.5, 0.9, 1],
outputRange: [0, 0.25, 0.7, 1],
})
},
overlayStyle: {
opacity: progress.interpolate({
inputRange: [0, 1],
outputRange: [0, 0.5],
extrapolate: 'clamp',
})
}
}
}
}}
/>
</RootStack.Navigator>
);
};
export default () => {
return (
<NavigationContainer>
<RootStackScreen/>
</NavigationContainer>
)
}