Question

所以我正在尝试将图像源设置为我从Firebase Storage返回的下载网址...问题是它没有显示图像，但控制台和下载网址都显示正确的存储网址到图片。 ..这是我目前拥有的代码：

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}/>

图像处于渲染功能中，并且屏幕上没有显示图像，但控制台将其显示为我可以点击并查看图像的实际网址

虽然没有发布或检查的实际工作答案是正确的，但我确实查看了其他示例问题。

React-Native: Download Image from Firebase Storage

Load and return an image from Firebase database/storage in React Native

React Native版本为0.45.1＆amp; Firebase的版本为4.1.3

有人可以帮我正确设置源代码吗？谢谢

Answer 1

我遇到类似的问题，我有正确的下载网址，但图片没有显示。由于样式问题，很可能无法显示图像。 iosCardImage 中的内容是什么？如果您还没有，请尝试定义 width 和 height 。尝试做：

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

并查看图片是否显示。

Answer 2

我解决了这个问题... 路径/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”视为公认的解决方案，但这不是正确的解决方案。我们只是扩大堆（如果目标设备有能力这样做），这意味着您的应用程序可能会工作更长的时间，但最终还是会失败。

Answer 3

以下为其他人提供参考的方法是...... 然而，正如@marcST所提到的那样，您必须使用React Natives内联样式或使用外部样式表在样式中设置高度和宽度。以下是您可以完成此操作的两种方法，我发布此信息，因为StackOverflow上没有关于如何在React Native中正确执行此操作的有效答案

第一种方式：所以有一些事情你需要注意这个方式。

当您使用.push()将数据添加到Firebase数据库/存储
您首先需要将州设置为undefined || null || ''
您应该使用shouldComponentMount()因为某些数据在组件安装到屏幕之前不会进入
您需要JSON.stringify从getDownloadURL()

this.state = { itemDataSource：ds， modalVisible：false，用户：未定义， imgSource：undefined， };

  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()将数据添加到您的firebase数据库
我使用.set()添加了重新加载的网址，以便在＆＃39;图像下保存到我的Firebase数据库中。文件夹...见下面的图片代码
当您将下载网址放入数据库时，您无需多次运行snapshot.forEach只是为了访问您的数据，因为您每次推送Firebase时都会绕过唯一ID集推。
使用图片网址从数据库中提取数据时，您无需JSON.stringify将其添加为图片URI。
您无需设置状态即可将URL添加为URI源
您现在可以像使用普通JSON对象一样使用点表示法来访问数据

这是解决这个问题的组件代码......

  getTrucks(truckRef) {
    truckRef.on('value', (snap) => {
      console.log(snap.val());
      let truck = snap.val();
      let trucks = [];
      snap.forEach((truck) => {
        trucks.push({
          uid: truck.key,
          name: truck.val().data.name,
          food: truck.val().data.foodType,
          desc: truck.val().data.description,
          menu: truck.val().data.menu,
          phone: truck.val().data.phone,
          pic1: truck.val().mainImage.pic1,
          pic2: truck.val().image2.pic2,
          pic3: truck.val().image3.pic3,
          pic4: truck.val().image4.pic4,
          pic5: truck.val().image5.pic5,
          pic6: truck.val().image6.pic6
        });
        console.log(trucks);
      });
      this.setState({
        itemDataSource: this.state.itemDataSource.cloneWithRows(trucks),
      });
    });
  }

  <Image
   source={{uri: truck.pic1}} 
   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()，则会参考数据库中发生的情况

如果您有其他问题，请告知我们

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

3 个答案: