React native 和 firebase:检查是否登录后如何显示登录表单

Question

我的第一个 React 项目。我想做的是首先显示徽标，然后检查用户是否已登录。如果是，他们直接进入下一页。否则，登录表单将显示在同一页面的徽标下方。类似于Facebook应用程序在您打开它时的工作方式。

到目前为止，我使用Firebase进行身份验证得到了什么：

  loginCheck(){
    const { navigate } = this.props.navigation;
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        navigate('Feed');
      } else {
        return (
          <View style={styles.formContainer}>
            <FormLabel>Email</FormLabel>
            <FormInput
            onChangeText={(email) => this.setState({ email })}/>
            <FormLabel>Password</FormLabel>
            <FormInput
             secureTextEntry
            onChangeText={(password) => this.setState({ password })}/>
            <Text style={styles.statusText}>{ this.state.error }</Text>
            {this.renderButtonOrLoading()}
          </View>
        )
      }
    });
  }
  render() {
    return (
      <KeyboardAvoidingView behavior="padding" style={styles.container}>
        <View style={styles.loginContainer}>
          <Image resizeMode="contain" style={styles.logo} source={require('../../components/images/logo.png')} />
        </View>
        {this.loginCheck()}
      </KeyboardAvoidingView>
    );
  }
}

目的是在用户未登录时获取loginCheck() return语句中的所有内容以呈现方式显示。我知道我的方法是错误的，只是不知道如何解决它。

但是，当我将render() {this.loginCheck()}替换为loginCheck() return语句中的所有内容时，renderButtonOrLoading()似乎工作正常。

  renderButtonOrLoading(){
    if(this.state.loading){
      return (<Text style={styles.statusText}>Loading</Text>);
    }
    return (
      <View>
        <Button
        onPress={this.onLoginPress.bind(this)}
        title='Login'/>
        <Button
        onPress={this.onSignupPress.bind(this)}
        title='Sign Up'/>
      </View>
    );
  }

将不胜感激任何帮助，这个问题已经卡了一段时间。

Answer 1

我的猜测是您对firebase.auth().onAuthStateChanged()的调用没有及时完成render - 即您调用了Promise但它在调用之前没有解决render。如果您在该承诺的 .then() 块内调用 setState，您至少会触发重新渲染，但这仍然意味着您在每次调用 render 时都会发出新的auth请求。我的建议是将您的auth支票移至componentDidMount：

componentDidMount() {
    firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
            this.setState({ isAuthorized: true });
        } else {
            this.setState({ isAuthorized: false });
    });
}

然后只需在 render 中使用三元运算符来确定要显示的 UI：

render() {
    ...your base code
    {this.state.isAuthorized ? navigate('Feed') : <Your Login UI>}
}

您还可以查看此库 - 身份验证状态在应用程序重新启动/启动期间保持不变： https://github.com/invertase/react-native-firebase 祝你好运！

Answer 2

componentDidMount() {
      firebase.auth().onAuthStateChanged(user => {
        this.props.navigation.navigate(user ? 'Screen One' : 'Screen Two')
      })
    }

您可以直接在首页上应用此检查。在这里，您将检查您的用户登录状态，如果他已登录，您可以继续