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

Question

我对 Firebase 和 React Native 还是有些陌生。当用户成功登录时，我想从 firebase 检索并显示用户的名字。

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

如果我能看到这是如何完成的，我就能弄清楚如何获取和显示其他用户信息，如地址、库存等。

登录.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>

Answer 1

您可以将用户数据从一个屏幕传递到另一个屏幕，在您的情况下，它是从登录屏幕到帐户屏幕，或者使用 Redux 来存储用户数据并访问它通过 Prop 。

发送路由参数:

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

访问路由参数:

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

检查这个React Navigation Route Params