仅对新用户反应导航 v3 的显示屏幕答案

【问题标题】：Display screen to only new users react navigation v3仅对新用户反应导航 v3 的显示屏幕
【发布时间】：2019-05-26 17:09:55
【问题描述】：

我想知道如何使用 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',
  }
));

【问题讨论】：

标签： android ios reactjs react-native react-navigation

【解决方案1】：

我会将它放在 AppStack 中，因为它是您的应用内容的一部分，而不是您的身份验证流程的一部分。

此外，您需要一种方法来确定它是新用户还是老用户。因此，您要么在服务器端存储此信息，要么在本地使用 AsyncStorage。最好的方法是将此信息存储在服务器端，因为用户总是可以得到一部新手机。因此，在加载（如果经过身份验证）或身份验证期间，请确保获取该数据并相应地显示/隐藏欢迎屏幕。

【讨论】：