我想知道如何使用 React Navigation v3 实现欢迎/入门屏幕。
我的疑惑是欢迎/入门屏幕应该放在哪里?
屏幕应该在 Appstack 还是 Authstack 中?
我只想向新用户显示此内容。当用户注销并重新进行身份验证时,我希望将其从堆栈中弹出,因为他们不是新用户并将他们直接带到主应用程序。
我认为这段逻辑应该发生在 Authloadingscreen 中,我只是不确定如何使用或使用什么技术。
这是来自 https://snack.expo.io/@react-navigation/auth-flow-v3 的应用示例
如有任何帮助,我们将不胜感激。
import React from 'react';
import {
ActivityIndicator,
AsyncStorage,
Button,
StatusBar,
StyleSheet,
View,
} from 'react-native';
import { createStackNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation';
class SignInScreen extends React.Component {
static navigationOptions = {
title: 'Please sign in',
};
render() {
return (
<View style={styles.container}>
<Button title="Sign in!" onPress={this._signInAsync} />
</View>
);
}
_signInAsync = async () => {
await AsyncStorage.setItem('userToken', 'abc');
this.props.navigation.navigate('App');
};
}
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome to the app!',
};
render() {
return (
<View style={styles.container}>
<Button title="Show me more of the app" onPress={this._showMoreApp} />
<Button title="Actually, sign me out :)" onPress={this._signOutAsync} />
</View>
);
}
_showMoreApp = () => {
this.props.navigation.navigate('Other');
};
_signOutAsync = async () => {
await AsyncStorage.clear();
this.props.navigation.navigate('Auth');
};
}
class OtherScreen extends React.Component {
static navigationOptions = {
title: 'Lots of features here',
};
render() {
return (
<View style={styles.container}>
<Button title="I'm done, sign me out" onPress={this._signOutAsync} />
<StatusBar barStyle="default" />
</View>
);
}
_signOutAsync = async () => {
await AsyncStorage.clear();
this.props.navigation.navigate('Auth');
};
}
class AuthLoadingScreen extends React.Component {
constructor() {
super();
this._bootstrapAsync();
}
// Fetch the token from storage then navigate to our appropriate place
_bootstrapAsync = async () => {
const userToken = await AsyncStorage.getItem('userToken');
// This will switch to the App screen or Auth screen and this loading
// screen will be unmounted and thrown away.
this.props.navigation.navigate(userToken ? 'App' : 'Auth');
};
// Render any loading content that you like here
render() {
return (
<View style={styles.container}>
<ActivityIndicator />
<StatusBar barStyle="default" />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen });
export default createAppContainer(createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
App: AppStack,
Auth: AuthStack,
},
{
initialRouteName: 'AuthLoading',
}
));
最佳答案
我会把它放在 AppStack 中,因为它是您的应用程序内容的一部分,而不是您的身份验证流程的一部分。
此外,您需要一种方法来确定它是新用户还是回访用户。因此,要么在服务器端存储此信息,要么在本地使用 AsyncStorage。最好的方法是将此信息存储在服务器端,因为用户总能得到一部新手机。因此,在加载(如果已通过身份验证)或进行身份验证期间,请确保获取该数据并相应地显示/隐藏欢迎屏幕。
关于android - 仅向新用户显示屏幕 react 导航 v3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53965919/