如何解决登录后隐藏标签导航 React Native
我正在使用 tabnavigator 和 stacknavigator,在我连接后,除非我将 Home 添加到我的 stacknavigator,否则我无法重定向到我的主页导航,但 tabnavigator 消失了。我想知道我应该怎么做才能被发送到我的主页导航,这样我的 tabnavigator 才不会消失。
const [user,setUser] = useState(false);
useEffect(()=> {
setTimeout(() => {
User()
console.log("Update")
},500);
},)
const User = async() => {
const value = await AsyncStorage.getItem('@user')
if (value === null) {
console.log('disconnecte')
}else {
setUser(true)
console.log("online")
navigation.navigate('Home')
}
}
return (
<NavigationContainer>
{user === false ? <Authnavigator/> : <Stacknavigator /> }
</NavigationContainer>
)
}
堆栈导航器
export default function Stacknavigator() {
return (
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
headerShown: false
}}>
<Stack.Screen name="TabNavigator" component={TabNavigator} />
<Stack.Screen name="Details" component={Details} />
</Stack.Navigator>
)
}
身份验证器
export default function Authnavigator() {
return (
<AuthStack.Navigator screenOptions={{
headerShown: false
}}>
<AuthStack.Screen name="Login" component={Login} />
</AuthStack.Navigator>
)
}
更新:
登录导航到主页有效,但转到详细信息视图不起作用
export default function Stacknavigator() {
return (
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
headerShown: false
}}>
<Stack.Screen name="Tabnavigator" component={Tabnavigator} />
<Stack.Screen name="Details" component={Details} />
</Stack.Navigator>
)
}
标签导航器
export default function Tabnavigator() {
return (
<Tab.Navigator
initialRouteName="Home"
activeColor="#f0edf6"
inactiveColor="#6D6D6D"
barStyle={{ backgroundColor: '#171717' }}
>
<Tab.Screen name="Home" component={Home} options= {{
tabBarIcon: ({ color }) => (
<FontAwesome name="home" size={20} color={(color)} />
)
}} />
<Tab.Screen name="Recherche" component={Search} options={{
tabBarIcon: ({color}) => (
<FontAwesome name="search" size={20} color={(color)} />
)
}} />
<Tab.Screen name="Favorie" component={Favorie} options={{
tabBarIcon: ({color}) => (
<FontAwesome name="star" size={20} color={(color)} />
)
}}/>
</Tab.Navigator>
)
}
const Tab = createMaterialBottomTabNavigator();
身份验证器
export default function Authnavigator() {
return (
<AuthStack.Navigator screenOptions={{
headerShown: false
}}>
<AuthStack.Screen name="Login" component={Login} />
<AuthStack.Screen name="Tabnavigator" component={Tabnavigator} />
</AuthStack.Navigator>
)
}
解决方法
您的 initialRouteName
中没有 Home
Stack.Navigator
。您需要将其指向 TabNavigator
,以便您的代码看起来像这样。
export default function Stacknavigator() {
return (
<Stack.Navigator
initialRouteName="TabNavigator"
screenOptions={{
headerShown: false
}}>
<Stack.Screen name="TabNavigator" component={TabNavigator} />
<Stack.Screen name="Details" component={Details} />
</Stack.Navigator>
)
}