React Native-如何在不登录的情况下直接指向主堆栈屏幕，并从主堆栈屏幕重定向回Auth Stack

Question

我正在构建一个由公共和私有路由组成的应用程序。

私人路线如下：登录(开始屏幕(-->(用户已登录(-->主堆栈屏幕(家庭、国家、社区等(

公共路线如下：登录(开始屏幕(-->(用户未登录(-->主堆栈屏幕(家庭、国家、社区等(，功能有限，内容显示给用户

在公共路由中，我试图在主堆栈屏幕的标题中添加一个登录图标，这样用户就可以重定向回Auth流，并在任何时候登录或注册。

这是我的AuthStackNavigator.js:代码

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import SignInScreen from "../screen/authentication/SignInScreen";
import SignUpScreen from "../screen/authentication/SignUpScreen";
import SignUpSuccessScreen from "../screen/authentication/SignUpSuccessScreen";
import PasswordResetScreen from "../screen/authentication/PasswordResetScreen";
const Stack = createStackNavigator();
const AuthStackNavigator = () => {
return (
<Stack.Navigator
initialRouteName="Sign In"
screenOptions={{ headerShown: false }}
>
<Stack.Screen name="Sign In" component={SignInScreen} />
<Stack.Screen name="Sign Up" component={SignUpScreen} />
<Stack.Screen name="Sign Up Success" component={SignUpSuccessScreen} />
<Stack.Screen name="Password Reset" component={PasswordResetScreen} />}
</Stack.Navigator>
);
};
export default AuthStackNavigator;

此处为MainNavigator.js:

import React, { useContext } from "react";
import { Platform, StyleSheet } from "react-native";
import { createStackNavigator } from "@react-navigation/stack";
import CountryScreen from "../screen/CountryScreen";
import CommunitiesScreen from "../screen/CommunitiesScreen";
import CommunityCreateScreen from "../screen/authorized/CommunityCreateScreen";
import CommunityHomeScreen from "../screen/CommunityHomeScreen";
import PostCreateScreen from "../screen/authorized/PostCreateScreen";
import CommentPostScreen from "../screen/authorized/CommentPostScreen";
import SearchBar from "../component/SearchBar";
import { generalconfig } from "../helper/generalconfig";
import { stylesconfig } from "../helper/stylesconfig";
import { AuthContext } from "../src/context/AuthContext";
import CustomProfileImg from "../component/CustomProfileImg";
import DefaultProfileIcon from "../component/DefaultProfileIcon";
import { Entypo } from "react-native-vector-icons";
import LoginIcon from "../component/LoginIcon";
const MainNavigator = () => {
const Stack = createStackNavigator();
const platform = Platform.OS;
const { width } = generalconfig.device;
const headerImageContainer = stylesconfig.global.headerImageContainer;
const { common, ios, aos } = stylesconfig.navigatorHeader;
const { profileImg, token } = useContext(AuthContext);
return (
<Stack.Navigator>
<Stack.Screen
name="Search Country"
component={CountryScreen}
options={{
title: "Search",
headerStyle: {
backgroundColor: common.backgroundColor,
},
headerTitleAlign: "left",
headerTintColor: common.color,
headerTitleStyle: {
fontFamily: platform === "ios" ? ios.fontFamily : aos.fontFamily,
fontWeight: platform === "ios" ? ios.fontWeight : aos.fontWeight,
fontSize: platform === "ios" ? ios.fontSize : aos.fontSize,
},
headerRight: () =>
profileImg ? (
<CustomProfileImg
activeOpacity={1.0}
onPress={() => {}}
src={{ uri: profileImg }}
style={headerImageContainer}
/>
) : (
<DefaultProfileIcon
activeOpacity={1.0}
onPress={() => {}}
iconSize={55}
iconPosition={{ height: 65, marginRight: 11 }}
/>
),
}}
/>
<Stack.Screen
name="Communities"
component={CommunitiesScreen}
options={{
headerStyle: {
backgroundColor: common.backgroundColor,
},
headerTintColor: common.color,
headerTitleStyle: {
fontFamily: platform === "ios" ? ios.fontFamily : aos.fontFamily,
fontWeight: platform === "ios" ? ios.fontWeight : aos.fontWeight,
fontSize: platform === "ios" ? ios.fontSize : aos.fontSize,
},
headerBackTitle: " ",
headerBackImage: () => (
<Entypo
name="controller-fast-backward"
size={23}
style={{ marginLeft: width - 376 }}
color={common.color}
/>
),
headerRight: () => (token ? <LoginIcon /> : null),
}}
/>
<Stack.Screen
name="Create Community"
component={CommunityCreateScreen}
options={{
headerTitle: "Create a Community",
}}
/>
<Stack.Screen name="Community Home" component={CommunityHomeScreen} />
<Stack.Screen name="Create Post" component={PostCreateScreen} />
<Stack.Screen name="Comment Post" component={CommentPostScreen} />
</Stack.Navigator>
);
};
const styles = StyleSheet.create({});
export default MainNavigator;

LoginCon.js(组件(

import React from "react";
import { TouchableOpacity } from "react-native";
import { stylesconfig } from "../helper/stylesconfig";
import { MaterialCommunityIcons } from "react-native-vector-icons";
import AuthStackNavigator from "../navigator/AuthStackNavigator";
const LoginIcon = () => {
const { common } = stylesconfig.navigatorHeader;
return (
<TouchableOpacity
onPress={() => {
<NavigationContainer>
<AuthStackNavigator />
</NavigationContainer>;
}}
>
<MaterialCommunityIcons
name="login"
size={23}
color={common.color}
style={{ marginRight: 15 }}
/>
</TouchableOpacity>
);
};
export default LoginIcon;

SignInScreen.js(当按下时导航到国家屏幕的链接的部分代码(

<CustomButtonLink
custBtnLinkName={browseAroundLabel}
style={[styles.spacing_Browse, styles.align]}
onNavigate={() => {
navigation.navigate(MainNavigator, { screen: "Search Country" });
}}
onNavigate={() => <MainNavigator />}
/>

CustomButtonLink.js(组件(

const CustomButtonLink = ({ custBtnLinkName, style, onNavigate }) => {
return (
<TouchableOpacity style={style} onPress={onNavigate}>
<Text
style={[
stylesconfig.global.gtext,
generalconfig.platform.os === "ios"
? stylesconfig.ios.text
: stylesconfig.aos.text,
]}
>
{custBtnLinkName}
</Text>
</TouchableOpacity>
);
};

所以我的问题是：

1. 如果用户未通过身份验证，我如何将用户引导到公共路线(国家/地区屏幕(
2. 一旦用户被引导到公共路线(比如国家屏幕(，当他点击登录图标时，我如何将他重定向回AuthStackNavigator(登录屏幕(

我是React Native的新手，如果有人能帮忙，我深表感谢。谢谢

Answer 1

对于身份验证流，您应该使用条件操作，如"&amp&"；，三元运算符等

react导航推荐的方法是使用上面的方法，你可以在这里遵循他们的指南。

E。G.

isSignedIn ? (
<>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
<Stack.Screen name="Settings" component={SettingsScreen} />
</>
) : (
<>
<Stack.Screen name="SignIn" component={SignInScreen} />
<Stack.Screen name="SignUp" component={SignUpScreen} />
</>
)

Answer 2

除了@Abhishek Sah答案外，建议检测用户身份验证状态并相应地重新发布导航程序。当用户成功注册或注销时，这将有所帮助。

// Custom hook to continuously listen to user authentication state
const  isSignedIn = useAth()

// listen to authentication state and rerender navigation accordingly
useEffect(()=>{
},[isSignedIn])
isSignedIn ? (
<>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
<Stack.Screen name="Settings" component={SettingsScreen} />
</>
) : (
<>
<Stack.Screen name="SignIn" component={SignInScreen} />
<Stack.Screen name="SignUp" component={SignUpScreen} />
</>
)