从防火墙存储调用图像-无效钩子调用。只能在函数组件的主体内调用钩子。

Question

大家好！

我正在尝试做一个定制的钩子，这个钩子可以用来调用来自防火墙存储的图像。函数的输入来自包含JSON的DATA.js文件。例如，useImageSource( item.photo ) -item.photo将等于“低级/向前-腿部摆动”(这是我的防火墙存储中的文件结构，用于那个锻炼图像)。希望当我给你看我的代码时，它会更有意义！哈！

​

​

useImageSource

下面是我为此创建的自定义钩子的一个示例：

import React, { useState, useEffect } from "react";

import firebase from "@react-native-firebase/app";
import "@react-native-firebase/storage";
import FastImage from "react-native-fast-image";

import { getIllustration, Images } from "@flexeee:assets/images/Images";

export default function useImageSource(image, defaultImage) {
  const storage = firebase.storage();
  const [imageSource, setImageSource] = useState();

  useEffect(() => {
    async function getImageSource() {
      try {
        const url = await storage.ref(`images/${image}.png`).getDownloadURL();
        setImageSource({
          uri: url,
          priority: FastImage.priority.normal,
        });
      } catch (err) {
        setImageSource(defaultImage ?? Images.upperBody);
      }
    }

    getImageSource();
  }, [image, defaultImage, storage]);

  return imageSource;
}

SubCategories

下面是我尝试实现这个useImageSource钩子的例子：

import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  TouchableOpacity,
  Image,
  Dimensions,
} from "react-native";
import { Fontisto } from "@expo/vector-icons";
import ReactNativeHapticFeedback from "react-native-haptic-feedback";
import useImageSource from "@flexeee:common/utils/hooks/useImageSource";

import { Colors } from "@flexeee:common/theme/Colors";
import { Fonts } from "@flexeee:common/theme/Sizes";
import { Images } from "@flexeee:assets/images/Images";

const { width, height } = Dimensions.get("window");

const options = {
  enableVibrateFallback: true,
  ignoreAndroidSystemSettings: false,
};

export default function SubCategories({ navigation, workouts, category }) {
  
  const renderItem = ({ item }) => {
    const imageSrc = useImageSource(item.photo, Images.upperBody);
    return (
      <TouchableOpacity
        style={{ marginBottom: 10 * 2 }}
        onPress={() =>
          navigation.navigate("DetailStack", {
            screen: "WorkoutDetails",
            params: { item: item },
          }) & ReactNativeHapticFeedback.trigger("impactLight", options)
        }
      >
        {/* Image */}
        <View style={styles.workoutImageContainer}>
          {item.isLocked ? (
            <View style={{ backgroundColor: Colors.black, borderRadius: 10 }}>
              <Image
                source={imageSrc}
                resizeMode="cover"
                style={styles.workoutImage}
                opacity={0.75}
              />
            </View>
          ) : (
            <Image
              source={imageSrc}
              resizeMode="cover"
              style={styles.workoutImage}
            />
          )}
          <View style={styles.durationContainer}>
            <Text style={styles.title}>{item.duration}</Text>
          </View>
        </View>
        {item.isLocked && (
          <View style={styles.lockContainer}>
            <Fontisto name="locked" size={28} color={Colors.white} />
          </View>
        )}
        <View style={styles.subtitleContainer}>
          <Text style={styles.subtitle}>{item.name}</Text>
        </View>
      </TouchableOpacity>
    );
  };

  return (
    <View>
      <View style={styles.headingContainer}>
        <Text style={styles.heading}>{category.name}</Text>
        <TouchableOpacity
          onPress={() =>
            navigation.navigate("DetailStack", {
              screen: "WorkoutList",
              params: { category: category, workouts: workouts },
            }) & ReactNativeHapticFeedback.trigger("impactLight", options)
          }
        >
          <Text style={styles.viewOption}>View all</Text>
        </TouchableOpacity>
      </View>
      <FlatList
        data={workouts}
        horizontal
        keyExtractor={(item) => `${item.id}`}
        renderItem={renderItem}
        contentContainerStyle={{}}
        showsHorizontalScrollIndicator={false}
      />
    </View>
  );
}

DATA.js

下面是我的数据的一些上下文(一个例子)

export const workoutData = [
  {
    id: 1,
    name: "Lower-body warm up",
    rating: 4.8,
    categories: [1],
    isLocked: false,
    description: `Ah, the infamous 'leg day.' Sometimes it's a struggle to even make it to the gym when you're planning to train your lower body, let alone spend time warming up before the often dreaded workout. But not only can avoiding a warm-up increase your risk of injury, it can also hinder your performance. This holds especially true when you walk into the gym after a night of sleep or a long day of sitting at a desk. A good warm-up will raise your body temperature, improve mobility and groove proper movement patterns. Some people require more mobility, while others require more stability. Regardless of your needs, there are several warm-up exercises that can prepare you for almost any type of lower-body exercise.\n \nTip: Spend five minutes on a foam roller before your warm-up to better prepare your muscles.`,
    photo: "lowerbody/deep-squat",
    duration: `5 mins`,
    trainer: {
      avatar: "lowerbody/deep-squat",
      name: "Amy",
    },
    workout: [
      {
        exerciseId: 1,
        name: "Forward Leg Swing (left)",
        photo: "lowerbody/forward-legswing",
        description:
          "Stand straight with your feet hip-width apart and hold onto a wall. Keeping one leg stationary, slowly swing the opposite leg forward and backward in a single smooth movement.",
        muscle: "Hip flexors, hamstrings, quadriceps, glutes & calves",
        duration: 30,
      },
      {
        exerciseId: 2,
        name: "Forward Leg Swing (right)",
        photo: "lowerbody/forward-legswing",
        description:
          "Stand straight with your feet hip-width apart and hold onto a wall. Keeping one leg stationary, slowly swing the opposite leg forward and backward in a single smooth movement.",
        muscle: "Hip flexors, hamstrings, quadriceps, glutes & calves",
        duration: 30,
      },

防火墙存储文件结构

​

​

希望这是足够的信息帮助我解决这个问题？如果不是的话，我很乐意提供更多的细节--在此之前，当我在DATA.js文件中本地调用我的文件时，正在运行。只是需要一些想法或帮助，为什么这是行不通的！

，，谢谢你的时间，我期待着听到你的回应！

Answer 1

好吧，看来我的问题是我没有在渲染中返回任何东西。我必须返回另一个组件(我称之为{company}Image )，它在render中返回快速图像，称为FastImage，并以图像作为支柱。

希望这对读这篇文章的人有用！