在哪里应用 Firebase onAuthStateChanged

Question

我有这个非常基本的示例代码，包括登录、注册、主页和个人资料屏幕以及加载屏幕和一些堆栈和选项卡导航器。

我正在尝试将 firebase 合并到此代码中，以便在应用加载时检查用户是否未通过身份验证，然后转到 AuthStack，否则如果用户通过身份验证，则转到 AppStack。

我面临的问题是应用程序卡在加载屏幕并且 componentDidMount 中的代码似乎无法正常工作。

我参考了以下link，我所做的唯一更改是将 SignIn 和 SignUp 放在 TabNavigator 中，而不是像文章中提到的那样单独使用它们。

有人可以建议我的代码有什么问题吗？

import * as React from 'react';
import {
  Text,
  View,
  Image,
  StyleSheet,
  SafeAreaView,
  KeyboardAvoidingView,
  ScrollView,
} from 'react-native';

import {
  createAppContainer,
  createSwitchNavigator,
  createStackNavigator,
  createMaterialTopTabNavigator,
} from 'react-navigation';

import * as firebase from 'firebase';

const firebaseConfig = {
  apiKey: "AIzaSyCCJSgB3gS5SMqa2aUap8kYkE2ZhtN3tn4",
  authDomain: "fire8266-test.firebaseapp.com",
  databaseURL: "https://fire8266-test.firebaseio.com",
  storageBucket: "",
};

const colors = {
  primary: '#FF1493',
  secondary: '#b9b9b9'
}

const fonts = {
  hairline: 'Lato-Hairline',
  light: 'Lato-Light',
  base: 'Lato-Regular',
  bold: 'Lato-Bold'
}

class LoadingScreen extends React.Component {
  constructor() {
    super();
    if (!firebase.apps.length) {
      firebase.initializeApp(firebaseConfig);
    }
  }
  componentDidMount = async () => {
    this.authSubscription = firebase.auth().onAuthStateChanged(user => {
      this.props.navigation.navigate(user ? 'App' : 'Auth');
    });
  };

  componentWillUnmount() {
    this.authSubscription();
  }
  render() {
    return (
      <View style={styles.container}>
        <Text>Loading...</Text>
      </View>
    );
  }
}

class SignInScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Sign In...</Text>
      </View>
    );
  }
}

class ForgetPasswordScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Forget Password...</Text>
      </View>
    );
  }
}

class SignUpScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Sign Up...</Text>
      </View>
    );
  }
}

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Home...</Text>
      </View>
    );
  }
}

class ProfileScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Profile...</Text>
      </View>
    );
  }
}

const SignInStack = createStackNavigator(
  {
    SignIn: {
      screen: SignInScreen,
      navigationOptions: ({ navigation }) => ({
        header: null,
      }),
    },
    ForgetPassword: {
      screen: ForgetPasswordScreen,
      navigationOptions: ({ navigation }) => ({
        title: 'Forget Password',
      }),
    },
  },
  {
    initialRouteName: 'SignIn',
    headerMode: 'screen',
  }
);

const SignUpStack = createStackNavigator(
  {
    SignUp: {
      screen: SignUpScreen,
    },
  },
  {
    initialRouteName: 'SignUp',
    headerMode: 'none',
  }
);

const HomeStack = createStackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
  },
  {
    initialRouteName: 'Home',
    headerMode: 'none',
  }
);

const ProfileStack = createStackNavigator(
  {
    Profile: {
      screen: ProfileScreen,
    },
  },
  {
    initialRouteName: 'Profile',
    headerMode: 'none',
  }
);

const LoadingStack = createStackNavigator(
  {
    Loading: {
      screen: LoadingScreen,
      navigationOptions: ({ navigation }) => ({
        header: null,
      }),
    },
  },
  {
    initialRouteName: 'Loading',
    headerMode: 'screen',
  }
);

const AuthStack = createAppContainer(
  createMaterialTopTabNavigator(
    {
      SignIn: {
        screen: SignInStack,
        navigationOptions: ({ navigation }) => ({
          title: 'Sign In',
        }),
      },
      SignUp: {
        screen: SignUpStack,
        navigationOptions: () => ({
          title: 'Sign Up',
        }),
      },
    },
    {
      initialRouteName: 'SignIn',
      tabBarPosition: 'bottom',
      swipeEnabled: true,
      animationEnabled: true,
    }
  )
);

const AppStack = createAppContainer(
  createMaterialTopTabNavigator(
    {
      Home: {
        screen: HomeStack,
        navigationOptions: ({ navigation }) => ({
          title: 'Home',
        }),
      },
      Profile: {
        screen: ProfileStack,
        navigationOptions: () => ({
          title: 'Profile',
        }),
      },
    },
    {
      initialRouteName: 'Home',
      tabBarPosition: 'bottom',
      swipeEnabled: true,
      animationEnabled: true,
    }
  )
);

const AppContainer = createAppContainer(
  createSwitchNavigator(
    {
      Loading: LoadingStack,
      App: AppStack,
      Auth: AuthStack,
    },
    {
      initialRouteName: 'Loading',
    }
  )
);

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <AppContainer />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  icon: {
    width: 26,
    height: 26,
  },
});

Answer 1

我认为我通过将 TabNavigators 包装在 StackNavigator 中解决了这个问题。

const AuthStack = createAppContainer(
  createStackNavigator(
    {
      Auth: createMaterialTopTabNavigator(
        {
          SignIn: {
            screen: SignInStack,
            navigationOptions: ({ navigation }) => ({
              title: 'Sign In',
            }),
          },
          SignUp: {
            screen: SignUpStack,
            navigationOptions: () => ({
              title: 'Sign Up',
            }),
          },
        },
        {
          initialRouteName: 'SignIn',
          tabBarPosition: 'bottom',
          swipeEnabled: true,
          animationEnabled: true,
        }
      ),
    },
    {
      headerMode: 'modal',
      header: null
    }
  )
);

const AppStack = createAppContainer(
  createStackNavigator(
    {
      App: createMaterialTopTabNavigator(
        {
          Home: {
            screen: HomeStack,
            navigationOptions: ({ navigation }) => ({
              title: 'Home',
            }),
          },
          Profile: {
            screen: ProfileStack,
            navigationOptions: () => ({
              title: 'Profile',
            }),
          },
        },
        {
          initialRouteName: 'Home',
          tabBarPosition: 'bottom',
          swipeEnabled: true,
          animationEnabled: true,
        }
      ),
    },
    {
      headerMode: 'modal',
      header: null
    }
  )
);