React Native+Firebase注册表单如何同步存储用户头像与注册凭证

首先确保你的项目已经引入Firebase Storage模块，以下是完整修改步骤：

1. 调整Register组件状态与方法 #

修改constructor中的state，新增头像存储字段，同时把图片选择逻辑适配到类组件中：

constructor(props) {
  super(props);
  this.state = {
    email: '',
    password: '',
    name: '', 
    lastname: '',
    degree: '',
    phonenumber:'',
    description:'',
    avatarUri: null // 新增字段存储选中头像的本地路径
  }
  this.onSignUp = this.onSignUp.bind(this)
  this.pickImage = this.pickImage.bind(this)
}

// 组件挂载时申请相册权限
componentDidMount() {
  (async () => {
    if (Platform.OS !== 'web') {
      const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
      if (status !== 'granted') {
        alert('抱歉，需要相册权限才能上传头像');
      }
    }
  })();
}

// 头像选择方法
async pickImage() {
  let result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
    aspect: [4, 3],
    quality: 0.7, // 可适当降低质量减少上传体积
  });
  if (!result.cancelled) {
    this.setState({avatarUri: result.uri})
  }
}

你可以在注册表单中新增一个点击触发pickImage的按钮，用来选择和预览头像。

2. 修改注册逻辑，新增头像上传流程 #

Firebase Firestore仅支持存储结构化数据，头像文件需要先上传到Firebase Storage，拿到公共访问链接后再存入Doctors集合，修改后的onSignUp方法如下：

async onSignUp(){
  if(
    this.state.email != '' &&
    this.state.password != '' &&
    this.state.name != '' &&
    this.state.lastname != '' &&
    this.state.avatarUri != null // 可按需开启头像必填校验
  ){
    try {
      // 第一步：创建 Firebase 认证用户
      const { email, password, name, lastname, degree, phonenumber, description, avatarUri } = this.state;
      const userCredential = await firebase.auth().createUserWithEmailAndPassword(email, password)
      const uid = userCredential.user.uid

      // 第二步：上传头像到 Firebase Storage
      const response = await fetch(avatarUri)
      const blob = await response.blob()
      const storageRef = firebase.storage().ref(`doctorAvatars/${uid}`) // 用用户uid作为头像文件名避免重复
      await storageRef.put(blob)
      const avatarUrl = await storageRef.getDownloadURL() // 获取头像公共访问链接

      // 第三步：将用户信息+头像链接一并写入 Firestore
      await firebase.firestore().collection("Doctors")
        .doc(uid)
        .set({
          name,
          email,
          lastname,
          degree,
          phonenumber,
          description,
          avatar: avatarUrl // 新增头像字段
        })
      console.log('注册成功')
    } catch (error) {
      console.log(error)
      alert(error.message)
    }
  }
  else{
    alert("请填写所有必填信息并上传头像！");
  }
}

3. 配置Firebase Storage权限 #

需要在Firebase控制台的Storage页面修改规则，允许已认证用户上传头像，示例规则如下：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /doctorAvatars/{userId} {
      allow read: if true;
      allow write: if request.auth != null && request.auth.uid == userId;
    }
  }
}

内容的提问来源于stack exchange，提问作者Cli Ad