使用React Native将图像源设置为Firebase存储URL

因此，我尝试将图像源设置为从Firebase存储返回的下载url…问题是它没有显示图像，但控制台和下载url都显示了正确的图片存储url。。。以下是我目前拥有的代码：

this.state = {
      itemDataSource: ds,
      modalVisible: false,
      user: undefined,
      imgSource: undefined,
    };

  getTrucks(truckRef, storageRef) {
    truckRef.once('value', (snap) => {
      console.log(snap.val());
      // console.log(snap.key);
      let trucks = [];
      snap.forEach((trucksSnap) => {
        console.log(trucksSnap.key);
        uid = trucksSnap.key;
        this.setState({user: uid});
        trucksSnap.forEach((truckSnap) => {
          console.log(truckSnap.key);
          console.log(truckSnap.val());
          let truck = truckSnap.val();
          trucks.push({
            uid: uid,
            name: truck.name,
            food: truck.foodType,
            desc: truck.description,
            menu: truck.menu,
            phone: truck.phone, 
          });
        });
      });
      console.log(trucks);
      this.setState({
        itemDataSource: this.state.itemDataSource.cloneWithRows(trucks)
      });
    });
  }

getPics(storageRef) {
        setTimeout(() => {
        storageRef.ref('trucks/' + this.state.user + '/pic-1').getDownloadURL()
          .then((url) => {
            console.log(url);
            this.setState({imgSource: url});
          });
        }, 3000);
      }

<Image
  source={{uri: this.state.imgSource}} 
  style={styles.iosCardImage}/>

this.state={
itemDataSource:ds，
modalVisible:错误，
用户：未定义，
imgSource:未定义，
};
getTrucks（truckRef、storageRef）{
truckRef.once（'值'，（捕捉）=>{
console.log（snap.val（））；
//console.log（snap.key）；
让卡车=[]；
snap.forEach（（trucksnap）=>{
console.log（trucksnap.key）；
uid=trucksnap.key；
this.setState（{user:uid}）；
truckSnap.forEach（（truckSnap）=>{
日志（truckSnap.key）；
log（truckSnap.val（））；
let truck=truckSnap.val（）；
卡车，推({
uid:uid，
名称：truck.name，
食物：truck.foodType，
描述：卡车描述，
菜单：truck.menu，
电话：truck.phone，
});
});
});
控制台.原木（卡车）；
这是我的国家({
itemDataSource:this.state.itemDataSource.cloneWithRows（卡车）
});
});
}
getPics（storageRef）{
设置超时（（）=>{
storageRef.ref（'trucks/'+this.state.user+'/pic-1'）。getDownloadURL（）
。然后（（url）=>{
console.log（url）；
this.setState（{imgSource:url}）；
});
}, 3000);
}

图像在渲染功能中，屏幕上没有显示图像，但控制台以其他方式显示它，作为我可以单击并查看图像的实际url

我确实看了其他的例子问题，尽管没有一个实际的工作答案张贴或检查为正确

React Native版本为0.45.1，Firebase版本为4.1.3

有人能帮我正确设置源代码标签吗？

---

谢谢

我遇到了与此类似的问题，我有正确的下载URL，但图像没有显示出来。 很可能是由于样式问题，图像未显示。iosCardImage中有什么？如果还没有，请尝试定义宽度和高度。试着做：

<Image
 source={{uri: this.state.imgSource}} 
 style={{ height: 200 }}/>

---

并查看图像是否显示。

为供其他人将来参考，这里有一些方法可以做到这一点。。。 但是，正如@marcST所提到的，您必须使用React Natives内联样式或外部样式表在样式中设置高度和宽度。这里有两种方法，你可以做到这一点，我张贴这一点，因为没有一个有效的答案在这里的StackOverflow如何正确地做到这一点在反应本机

第一条路： 因此，有几件事你需要注意

这是当您使用

.push（）

将数据添加到Firebase数据库/存储时

您首先需要将state设置为

undefined | | null | |'

您应该使用

shouldComponentMount（）

，因为在组件安装到屏幕之前，一些数据不会进入

您需要

JSON.stringify

从

getDownloadURL（）返回的URL

此.state={ itemDataSource:ds， modalVisible:错误， 用户：未定义， imgSource:未定义， };

  shouldComponentUpdate(nextState) {
    return nextState.imgSource !== this.state.imgSource;
  }

  getTrucks(truckRef, storageRef) {
    truckRef.once('value', (snap) => {
      console.log(snap.val());
      // console.log(snap.key);
      let trucks = [];
      snap.forEach((trucksSnap) => {
        console.log(trucksSnap.key);
        uid = trucksSnap.key;
        this.setState({user: uid});
        trucksSnap.forEach((truckSnap) => {
          console.log(truckSnap.key);
          console.log(truckSnap.val());
          let truck = truckSnap.val();
          trucks.push({
            uid: uid,
            name: truck.name,
            food: truck.foodType,
            desc: truck.description,
            menu: truck.menu,
            phone: truck.phone, 
          });
        });
      });
      console.log(trucks);
      this.setState({
        itemDataSource: this.state.itemDataSource.cloneWithRows(trucks)
      });
    });
  }

getPics(storageRef) {
        setTimeout(() => {
        storageRef.ref('trucks/' + this.state.user + '/pic-1').getDownloadURL()
          .then((url) => {
            console.log(url);
            let imgURL = JSON.stringify(url)
            this.setState({imgSource: imgURL});
          });
        }, 3000);
      }

<Image
  source={{uri: this.state.imgSource}} 
  style={styles.iosCardImage}/>

这是我所说的set方法的数据库代码

let url = task.snapshot.downloadURL;
trucksRef.child(user).child('mainImage').set({pic1: url});

 trucksRef.child(firebaseUser.uid).child('data').set({
    name: $('#name').val(),
    foodType: $('#food').val(),
    description: $('#description').val(),
    address: $('#address').val(),
    city: $('#city').val(),
    zip: $('#zip').val(),
    phone: $('#phone').val(),
    menu: $('#menu').val(),
    });

如果使用

.set（）

而不是

.push（）

---

如果您还有其他问题，请告诉我

我解决了这个问题。。。 path/android/app/src/main/AndroidManifest.xml

android:largeHeap=“true

<application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:roundIcon="@mipmap/ic_launcher_round"
  android:allowBackup="false"
  android:largeHeap="true"
  android:theme="@style/AppTheme">

---

我经常认为android:largeHeap=“true”是一个公认的解决方案，但这不是正确的解决方案。我们只是扩大堆（如果目标设备有能力这样做的话）这意味着你的应用程序可能会工作更长时间，但最终可能会失败。

@marcST…这是我的卡片样式：`height:80，marginLeft:8，marginRight:10，marginTop:10，resizeMode:'contain'，width:90，当我为图像设置背景色时，它会显示一个图像轮廓框。不确定是什么我昨晚确实调用了shouldComponentUpdate（），以防数据延迟进入，并且它仍在做同样的事情。react native是否在z轴上有可能导致这种情况的样式？

<application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:roundIcon="@mipmap/ic_launcher_round"
  android:allowBackup="false"
  android:largeHeap="true"
  android:theme="@style/AppTheme">