如何在Firebase帐户中显示用户名

时间:2019-05-22 00:35:12

标签: javascript reactjs react-native react-redux firebase-authentication

我仍然对Firebase还是有些陌生,并会做出反应。用户成功登录后,我想从Firebase中检索并显示用户的名字。

我不想在我的Account.js文件中对临时名称“ Hussnain_sarwar”进行硬编码,而是要显示用户的名字。我不知道执行此操作的正确语法,我不确定这是否需要Redux,但是如果确实需要,我肯定需要帮助哈哈。

如果我能看到如何完成操作,我可以弄清楚如何获取和显示其他用户信息,例如地址,库存等。

SignIn.js

firebase
      .auth()
      .signInAndRetrieveDataWithCredential(credential)
      .then((result) => {
        console.log('User is signed in');
        if(result.additionalUserInfo.isNewUser){


        firebase
        .database()
        .ref(`/users/${result.user.uid}`)
        .set({
          gmail: result.user.email,
          profile_picture: result.additionalUserInfo.profile.picture,
          locale: result.additionalUserInfo.profile.locale, //what location you're in
          first_name: result.additionalUserInfo.profile.given_name,
          last_name: result.additionalUserInfo.profile.family_name,
          created_at: Date.now()
        })
        .then(function(snapshot) {

        });
      } else {
        firebase
        .database()
        .ref(`/users/${result.user.uid}`)
        .update({
          last_logged_in: Date.now()
        });
      }
      })
      .catch((error) => {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
        // The email of the user's account used.
        const email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        const credential = error.credential;
        // ...
      });
    } else {
      console.log('User already signed-in Firebase.');
      }
    },
  );
};

Account.js

render() {
    const {
      navigation: { navigate }
    } = this.props;
    return (
      <View style={[commonStyles.flex1, { backgroundColor: '#000000' }]}>
      <Header>
          <Text
            style={[
              styles.TextColor,
              commonStyles.font18,
              commonStyles.textBold
            ]}
          >
            My Account
          </Text>
        </Header>
        <View style={[commonStyles.alignSelfcenter, commonStyles.mt20]} />
        <View style={[commonStyles.alignSelfcenter, commonStyles.mt20]}>
          <Text
            style={[
              commonStyles.textWhite,
              commonStyles.font16,
              commonStyles.textBold
            ]}
          >
            Hussnain_sarwar
          </Text>
        </View>

1 个答案:

答案 0 :(得分:1)

您可以将用户数据从一个屏幕传递到另一个屏幕,如果是从登录屏幕帐户屏幕,也可以使用Redux来存储用户数据并访问它通过道具。

发送路线参数:

 this.props.navigation.navigate('RouteName', { /* params go here e.g. user: { name: "test" } */ })

访问路由参数:

this.props.navigation.getParam(paramName, defaultValue)

选中此React Navigation Route Params