反应原生 Firebase 身份验证答案

【问题标题】：react native firebase authentication反应原生 Firebase 身份验证
【发布时间】：2019-02-23 04:10:19
【问题描述】：

在使用 firebase 做出本机反应时，我得到了一个聊天应用程序代码。它使用一个按钮来显示我注册的朋友，但我想检查这个按钮单击用户何时登录。

这是渲染函数中的按钮代码

  render() {
    return (
      <View style={styles.containerl}>
        <StatusBar barStyle="light-content" backgroundColor="red" />
        <TouchableOpacity>
          <Text
            style={styles.buttonStyle}
            onPress={() => this.props.navigation.navigate("Friendlist")}
          >
            SHOW FRIEND LIST
          </Text>
        </TouchableOpacity>       
      </View>
    );
  }

我想将此 firebase 身份验证代码添加到 Show Friend List 文本新闻中。

firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        console.log('user logged')
      }
   });

谁能帮帮我？

【问题讨论】：

标签： firebase react-native firebase-authentication

【解决方案1】：

你可以像下面这样。添加标志以检查用户是否登录

    state = {
  isUserLogged: false
}

constructor(props) {
  super(props);

  firebase.auth().onAuthStateChanged((user) => {
    if (user) {
      this.setState({
        isUserLogged: true
      })
    } else {
      this.setState({
        isUserLogged: false
      })
    }
  });
}

render() {

  return (
    <View style={styles.containerl}>
      <StatusBar barStyle="light-content" backgroundColor="red" />
      <TouchableOpacity>
        <Text
          style={styles.buttonStyle}
          onPress={() => {
            if (this.state.isUserLogged) {
              this.props.navigation.navigate("Friendlist")
            } else {
              console.log('user not logged')
            }
          }
          }
        >
          SHOW FRIEND LIST
        </Text>
      </TouchableOpacity>
    </View>
  );
}

【讨论】：

【解决方案2】：

为了显示用户是否登录，您需要将变量附加到用户状态。所以，你的验证码：

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    console.log('user logged')
  }
 });

基本上，会将此方法放入constructor() 或componentDidMount() 方法中。

从那里，您需要设置状态，例如 -

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    this.setState({ userLoggedIn: true });
    console.log('user logged')
  }
 });

并且在您的render() 中，您可以在onPress() 方法上相应地为this.state.userLoggedIn 附加条件。

如果您需要将登录状态发送到您的<Friendlist/> 组件，您需要这样做 -

this.props.navigation.navigate("Friendlist", {userLoggedIn: this.state.userLoggedIn})

在您的<Friendlist/> 组件中，您可以从this.props.navigation.state.params.userLoggedIn 获取它

【讨论】：