从函数中提取图像资源的 URL

Question

以下函数提取存储在 Firebase 存储中的图像并将其 URL 记录到控制台。我尝试了多种方法将提取的 URL 传递给图像以显示在屏幕上。所有图片 URL 已成功记录，但不会显示。

已编辑：添加完整代码

listFilesAndDirectories 函数被放置在const Gallery 声明之外，将函数放在Gallery 中仍然没有改变任何东西。 我还尝试将状态传递给变量并作为 uri 传递无济于事

import React, {setState} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  TouchableOpacity,
  Image,
} from 'react-native';
import Header from '../shared/header';
import firebase from '@react-native-firebase/app';
import storage from '@react-native-firebase/storage';
import Hamburg from '../shared/hamburg';
import SharedStyles from '../shared/sharedStyle';
import {DrawerActions, useNavigation} from '@react-navigation/native';

const Gallery: () => React$Node = () => {
  const navigation = useNavigation();

  function listFilesAndDirectories(reference, pageToken) {
    return reference.list({pageToken}).then(result => {
      result.items.forEach(ref => {
        // call getDownloadURL on every object reference
        ref.getDownloadURL().then(url => {
          setState({url: url});
          console.log(
            `File is referenced from :\n ${storageReference}:\n\n Image URL is:\n ${url}`,
          );
        });
      });

      if (result.nextPageToken) {
        return listFilesAndDirectories(reference, result.nextPageToken);
      }

      return Promise.resolve();
    });
  }

  const storageReference = firebase
    .storage()
    .refFromURL('gs://app404.com/images');

  listFilesAndDirectories(storageReference).then(() => {
    // storageReference.getDownloadURL();
    console.log('Started listing image download urls');
  });

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <View style={SharedStyles.header}>
          <TouchableOpacity
            onPress={() => {
              navigation.dispatch(DrawerActions.openDrawer());
            }}>
            <Hamburg />
          </TouchableOpacity>
          <Header title="Gallery" />
        </View>
        <ScrollView contentInsetAdjustmentBehavior="automatic">
          <View style={styles.container}>
            <View style={styles.sectionContainer}>
              <View>
                <Text>
                  Welcome to my Gallery!
                </Text>
                <Image
                  source={{
                       uri: {url}   //url is not defined
                  }}
                  style={styles.fetchedImage}
                />
              </View>
            </View>
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

编辑 2

const Gallery: () => React$Node = () => {
  const navigation = useNavigation();
  const [downloadUrl, setDownloadUrl] = useState({url: undefined});
  console.log(`URL should be undefined at this point ${downloadUrl}`);

  function listFilesAndDirectories(reference, pageToken) {
    return reference.list({pageToken}).then(result => {
      result.items.forEach(ref => {
        // call getDownloadURL on every object reference
        ref.getDownloadURL().then(url => {
          setDownloadUrl({url});
          console.log(`Image URL is:\n ${url}`);
        });
      });

在图片组件内部：

           <Image
                  source={{
                    uri: {...downloadUrl.url},
                  }}
                  style={styles.fetchedImage}
                />

Answer 1

由于 URL 是通过异步操作确定的，因此您无法将它们返回给 render 方法。相反，您需要将它们存储在状态中，然后从那里渲染它们：

function listFilesAndDirectories(reference, pageToken) {
  reference.list({pageToken}).then(result => {
    result.items.forEach(ref => {
      ref.getDownloadURL().then(url => {
        setState({ url: url });
      });
    });

    if (result.nextPageToken) {
      listFilesAndDirectories(reference, result.nextPageToken);
    }
  });
}

const storageReference = firebase
  .storage()
  .refFromURL('gs://app404.appspot.com/images');

listFilesAndDirectories(storageReference);

然后：

  <View>
    <Text>
      Welcome to my Gallery! Come back for more content.
    </Text>
    <Image
      source={{
        uri: {url} 
      }}
      style={styles.fetchedImage}
    />
  </View>

如果您想等待多张图片，请看这里：How to list all the names and download Urls from Firebase using React JS? 或 Firebase storage: download images to and put to img src in React map