Экран дисплея, только новые пользователи реагируют на навигацию v3

Question

Я хотел бы знать, как бы я реализовал экран приветствия / начала работы, используя реагирующую навигацию v3.

Я бы не понял, куда будет идти экран приветствия / начала работы?
должен линаходиться в Appstack или Authstack?

Я хочу показать это только новым пользователям.Когда пользователь выходит из системы и повторно проходит аутентификацию, я хочу, чтобы он выскочил из стека, потому что он не является новым пользователем и перенесет их непосредственно в основное приложение.

Я думаю, что эта часть логики должна иметь место вЭкран авторизации, я просто не уверен, как или какую технику использовать.

Это пример приложения от 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',
  }
));

Answer 1

Я бы поместил это в AppStack, поскольку он является частью содержимого вашего приложения, а не частью вашего процесса аутентификации.

Кроме того, вам нужен способ определить, является ли он новым или возвращающимся пользователем.Так что либо вы храните эту информацию на стороне сервера, либо локально, используя AsyncStorage.Наилучшим подходом было бы хранить эту информацию на стороне сервера, поскольку пользователь всегда может получить новый телефон.Таким образом, во время загрузки (если аутентифицировано) или аутентификации вы выбираете эти данные и соответственно отображаете / скрываете экран приветствия.