如何在react native中显示云firestore中的图像？

Question

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

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

不过，我这样做只是为了测试。当你写一个真正的程序时，不要让每个人都去写！

问题：

​

​

这是我的云存储，如何在我的react原生应用中显示此图像？我试着这样做：

<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

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

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设置为公共的，以防止对您的项目进行不必要的篡改！