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>
    );
  }
}

目标是让return loginCheck()语句中的所有内容都显示在渲染中，如果用户没有登录。我知道我的方法是错误的，只是不知道如何修复它

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

  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获得之前无法解析调用。如果您在该承诺的setState块内拨打.then()，则至少会触发重新呈现，但这仍然意味着您正在为auth发出新请求每次拨打render 时。我的建议是将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>} }

你也可以查看这个库 - 在app restarts / boots中保持auth状态：https://github.com/invertase/react-native-firebase祝你好运！

Answer 2

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

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

React native和firebase：如何在检查后显示登录表单是否已登录？

2 个答案: