从 function 中提取 URL 作为图像资源

Question

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

编辑：添加了完整的代码

listFilesAndDirectories function 被放置在const Gallery声明之外，将 function 放在Gallery中仍然没有改变任何东西。 我还尝试将 state 传递给变量并作为 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 方法。 相反，您需要将它们存储在 state 中，然后从那里渲染它们：

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>

如果您想等待多个图像，请看这里： 如何使用 React JS 从 Firebase 列出所有名称并下载 URL？ 或Firebase 存储：下载图像并放入 React map 中的 img src