关于Auth Flow和React Navigation的问题（React Native）

Question

我正在尝试使用我的应用程序设置Auth流程，但我似乎无法弄明白。这是我想要的流程，但如果您有任何可能对此有帮助的存储库，请告诉我：

标签：

• 家
• 搜索

屏幕：

• AuthLoading
• 登录
• 家
• 搜索

搜索验证流程：

1. 应用程序启动，检查userToken
2. 如果是userToken，则重定向到主屏幕（使用底部标签栏）
3. 如果没有userToken，则重定向到登录屏幕（登录屏幕有来自Expo的Facebook OAuth）
4. 用户登录Facebook并检查firebase如果成功，则重定向到主屏幕（使用底部标签栏）4。如果失败，重定向到登录屏幕

router.js

import React from 'react';
import { Platform, StatusBar } from 'react-native';
import { createStackNavigator, createBottomTabNavigator, createSwitchNavigator } from 'react-navigation';
import { FontAwesome } from 'react-native-vector-icons';

import AuthLoadingScreen from '../screens/AuthLoadingScreen';
import LoginScreen from '../screens/LoginScreen';
import HomeScreen from '../screens/HomeScreen';
import SearchScreen from '../screens/SearchScreen';


export const UnauthenticatedStack = createStackNavigator({
  AuthLoading: {
    screen: AuthLoadingScreen,
    navigationOptions: {
      title: 'AuthLoading',
      tabBarVisible: false,
      header: null,
      headerLeft: null,
      headerRight: null,
    },
  },
  Login: {
    screen: LoginScreen,
    navigationOptions: {
      title: 'Login',
      tabBarVisible: false,
      header: null,
      headerLeft: null,
    },
  },
});

export const AuthenticatedStack = createBottomTabNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        tabBarLabel: 'Home',
        tabBarIcon: ({ tintColor }) => (
          <FontAwesome name="home" size={24} color={tintColor} />
        ),
      },
    },
    Search: {
      screen: SearchScreen,
      navigationOptions: {
        tabBarLabel: 'Search',
        tabBarIcon: ({ tintColor }) => (
          <FontAwesome name="search" size={24} color={tintColor} />
        ),
      },
    },
  },
);

export default createSwitchNavigator({
  Home: AuthenticatedStack,
  Login: UnauthenticatedStack,
},
{
  initialRouteName: 'Home'
  ,
});

App.js

// Imports: Dependencies
import React from 'react';
import { View, StyleSheet } from 'react-native';
import firebase from 'firebase';
import { FirebaseAPIKey, authDomain, databaseURL, projectId, messagingSenderId } from './config/config';
import { UnauthenticatedStack, AuthenticatedStack } from './navigation/router';


// Firebase Config
export const firebaseConfig = {
  apiKey: FirebaseAPIKey,
  authDomain: `${authDomain}`,
  databaseURL: `${databaseURL}`,
  projectId: `${projectId}`,
  // storageBucket: "",
  messagingSenderId: `${messagingSenderId}`,
};

console.log(firebaseConfig)

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// React Native: Application
export default class App extends React.Component {
  render() {

    return (
      <View style={styles.container}>
        <UnauthenticatedStack />
      </View>
    );
  }
};


// Styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#CA3433',
  },
});

AuthLoading.js

import React from 'react';
import { ActivityIndicator, AsyncStorage, StatusBar, StyleSheet, View, Text } from 'react-native';

export default class AuthLoadingScreen extends React.Component {
  constructor(props) {
    super(props);
    this.checkUserToken();
  }

  async checkUserToken() {
    const userToken = await AsyncStorage.getItem('userToken');

    // If User Token
    if (userToken) {
      AsyncStorage.setItem(userToken);
      this.props.navigation.navigate('Home');

    }
    else {
      this.props.navigation.navigate('Login');
    }
  }

  // Render any loading content that you like here
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Checking Authentication</Text>
        <ActivityIndicator />
        <StatusBar barStyle="default" />
      </View>
    );
  }
}


// Styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#CA3433',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    justifyContent: 'center',
    color: '#fff',
    fontSize: 18,
    fontWeight: '500',
  },
});

Home.js

// Imports: Dependencies
import React from 'react';
import { View, StyleSheet } from 'react-native';

// Imports: Components
import List from '../components/List';


// React Native Screen: Home
export default () => (
  <View style={styles.container}>
    <List />
  </View>
);


// Styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Search.js

// Imports: Dependencies
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

// Imports: Components


// React Native Screen: Search
export default class Search extends Component {
  // Render
  render() {
    return (
      <View styles={styles.container}>
          <Text>Search</Text>
      </View>
    )
  }
}


// Styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Answer 1

在App.js中，不要导出firebase配置部分。 App类应该是这样的：

export default class App extends React.Component {
componentWillMount() {
    const firebaseConfig = {
    apiKey: FirebaseAPIKey,
    authDomain: `${authDomain}`,
    databaseURL: `${databaseURL}`,
    projectId: `${projectId}`,
    // storageBucket: "",
    messagingSenderId: `${messagingSenderId}`,
  }

    firebase.initializeApp(config);
}

  render() {

    return (
      <View style={styles.container}>
        <UnauthenticatedStack />
      </View>
    )
} 
};

Answer 2

将AuthLoadingScreen移动到createSwitchNavigator：

const rootNavigator =  createSwitchNavigator({
  Home: AuthenticatedStack,
  Login: UnauthenticatedStack,
  AuthLoading: AuthLoadingScreen,
},
{
  initialRouteName: 'AuthLoading',
});

export const AppNavigation = createAppContainer(rootNavigator)

App.js

// React Native: Application
export default class App extends React.Component {
  render() {

    return (
      <View style={styles.container}>
        <AppNavigation />
      </View>
    );
  }
};