如何在 React Native 中显示来自 Cloud Firestore 的图像？

Question

已解决！ : 查看下面的回复，非常感谢帮助过的人！我还必须像这样更改存储规则。它在存储>规则中：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}

虽然我这样做只是为了测试目的。写真程序的时候不要让大家写！

问题：

这是我的云存储，如何在我的 React Native 应用程序中显示此图像？我试着这样做：

<Image style={styles.stretch} source={{
  uri: 'gs://mezuniyet2r.appspot.com/images/erkek.jpg',
}}
  />

我在这里错过了什么？它不是这样工作的。它不应该像这样工作吗？我在官方文档中找不到这样的东西。确实非常糟糕的文档。没什么好说的。有人可以帮帮我吗？这是完整的代码：

import React, {Component} from 'react';
import {
Platform,
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
Image,
Button,
StatusBar,
} from 'react-native';
import firebase from '@react-native-firebase/app'
import firestore from '@react-native-firebase/firestore'
import { format } from "date-fns";
import storage from '@react-native-firebase/storage';
class App extends Component {
state = {
tablo: {
adSoyad: "",
yas: "",
dogumTarihi: "",
mezunDurumu: "",

}
}
constructor(props) {
super(props);
this.getUser();
this.subscriber=firestore().collection("tablo").doc
('J6mAav1kjkcjrMupeOqX').onSnapshot(doc => {
this.setState({
tablo: {
adSoyad: doc.data().adSoyad,
yas: doc.data().yas,
dogumTarihi: doc.data().dogumTarihi,
mezunDurumu:doc.data().mezunDurumu,

}
}
)
});
}

getParsedDate(date){
  date = String(date).split(' ');
  var days = String(date[0]).split('-');
  var hours = String(date[1]).split(':');
  return [parseInt(days[2]), parseInt(days[1])-1, parseInt(days[0]), parseInt(hours[0]), parseInt(hours[1]), parseInt(hours[2])];
}



getUser= async() => {
const userDocument= await firestore().collection("tablolar").doc
("J6mAav1kjkcjrMupeOqX").get()
console.log(userDocument)
}
render() {
  var mezund;
  var date = new String(this.state.tablo.dogumTarihi);
  var date2=this.getParsedDate(date);

//const reference = storage().ref('erkek.jpg');
  //var storageRef = firebase.storage().ref();
  //var mountainsRef = storageRef.child('erkek.jpg');
  //var mountainImagesRef = storageRef.child('images/erkek.jpg');
  //mountainsRef.name === mountainImagesRef.name;
  console.log(date2);


  //this doesn't work though how do we do this??? it gives undefined.
  if(this.state.tablo.mezunDurumu==false){mezund="Mezun Değil"}
  else if(this.state.tablo.mezunDurumu=true){mezund="mezun"}
 // var dtarih= new String(this.state.tablo.dogumTarihi);
 
 

 
return (
<View style={styles.body}>
<Text style={styles.row}>Ad Soyad: {this.state.tablo.adSoyad}</Text>
<Text style={styles.row}>Yaş: {this.state.tablo.yas}</Text>
<Text style={styles.row}>Doğum Tarihi: {date}</Text>

<Text style={styles.row}>Mezun Durumu: {mezund}</Text>
<Image style={styles.stretch} source={{
  uri: 'gs://mezuniyet2r.appspot.com/erkek.jpg',
}}
  />
</View>
);
}
}
const styles=StyleSheet.create({
  body:{
    padding: 25,
    margin:25,
    backgroundColor:'orange',
    flex: 1
  },
  stretch:{width:50,height:50,
    resizeMode:'stretch',},
    row:{
    backgroundColor:'#fff',
    
    borderBottomWidth:4,
    }
  })
export default App

Answer 1

必须将图像路径转换为 URL 以便 <Image/> 组件可以获取和显示。这种异步操作最好在组件生命周期中完成一次并存储在状态中。

class App extends Component {
    state = {
       ...,
       imageUrl: null,
    }

    ...

    async componentDidMount() {
        var imageRef = firebase.storage().ref('erkek.jpg');
        var imageUrl = await imageRef.getDownloadURL();
        this.setState({ imageUrl });
    }

    render() {
        ...
        <Image style={styles.stretch} source={{ uri: this.state.imageUrl }}/>
        ...
    }
}

您还应确保用户具有图像的读取权限。您可以在 Firebase 安全规则中设置读写权限，请参阅 https://firebase.google.com/docs/storage/security/start#sample-rules。如果您希望每个人都可以阅读图像，请在您的规则中设置 ".read": true 但注意不要设置 write public 以防止对您的项目进行不必要的篡改！

如何在 React Native 中显示来自 Cloud Firestore 的图像？

How to show the image from the cloud firestore in react native?

android

react-native

react-native-android

google-cloud-firestore

react-native-firebase