react native FlatList 返回一个数字而不是图像组件的 url

Question

我是本地人的新手，我有一些问题：

我尝试使用 FlatList 组件显示列表，但图像 URL 作为数字返回。 即使当我 map 遍历数组时，返回的也是一个数字。 我在 StackOverflow 上检查了几个解决方案，但没有一个对我有用。

当我将 URL 直接传递给它工作的图像组件时，我可以看到图像。

谁能指出我的错误？

先感谢您。

这是 renderItem prop 中项目 object 的 console.log：

 LOG {"image": 1, "key": "1", "text": "2 out of 5", "title": "Venue"}
 LOG  {"image": 2, "key": "2", "text": "3 out of 10", "title": "Ceremony"}
 LOG  {"image": 3, "key": "3", "text": "1 out of 4", "title": "Learn a routine"}
 LOG  {"image": 4, "key": "4", "text": "3 out of 4", "title": "Band"}
 LOG  {"image": 1, "key": "1", "text": "2 out of 5", "title": "Venue"}
 LOG  {"image": 2, "key": "2", "text": "3 out of 10", "title": "Ceremony"}
 LOG  {"image": 3, "key": "3", "text": "1 out of 4", "title": "Learn a routine"}
 LOG  {"image": 4, "key": "4", "text": "3 out of 4", "title": "Band"}

这是 map 在没有 FlatList 的数组上的 console.log：

 LOG   This is a normal map over the array [object Object],[object Object],[object Object],
      [object Object]
 LOG  {"image": 1, "key": "1", "text": "2 out of 5", "title": "Venue"}
 LOG  {"image": 2, "key": "2", "text": "3 out of 10", "title": "Ceremony"}
 LOG  {"image": 3, "key": "3", "text": "1 out of 4", "title": "Learn a routine"}
 LOG  {"image": 4, "key": "4", "text": "3 out of 4", "title": "Band"}

这是我在主屏幕上调用的组件：

import React from "react";
import {
  StyleSheet,
  TouchableOpacity,
  View,
  Text,
  Image,
  FlatList,
} from "react-native";

import { colors } from "../styles/generalStyles";

import categories from "../data/categories";

const Category = () => {
  return (
    <FlatList
      data={categories}
      renderItem={({ item }) => {
        console.log(item);
        return (
          <TouchableOpacity style={styles.container}>
            <View style={styles.imageContainer}>
              <Image source={item.image} style={styles.img} />
            </View>
            <View style={styles.stats}>
              <View style={styles.textContainer}>
                <Text style={styles.title}>{item.title}</Text>
                <Text style={styles.text}>{item.text}</Text>
              </View>
              <View style={styles.lifeBar}>
                <View style={styles.totalLife}></View>
                <View style={styles.actualLife}></View>
              </View>
            </View>
          </TouchableOpacity>
        );
      }}
    />
  );
};

const styles = StyleSheet.create({
  container: {
    height: "25%",
  },

  imageContainer: {
    flex: 3,
    overflow: "hidden",
  },
  img: {
    height: "100%",
    width: "100%",
  },
  stats: {
    flex: 1,
    paddingVertical: 10,
    paddingHorizontal: 20,
    backgroundColor: `${colors.white}`,
  },
  textContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
  },
  title: {
    fontFamily: "MulishBold",
    color: `${colors.lighterGrey}`,
  },
  text: {
    fontFamily: "Mulish",
    color: `${colors.lighterGrey}`,
  },
  lifeBar: {
    width: "100%",
    height: 14,
  },
  totalLife: {
    height: 14,
    backgroundColor: `${colors.orange}`,
  },
  actualLife: {
    position: "absolute",
    top: 0,
    left: 0,
    width: "40%",
    height: 13,
    backgroundColor: `${colors.primary}`,
    borderBottomEndRadius: 3,
    borderTopEndRadius: 3,
  },
});

export default Category;

这是我从另一个文件导入的数据

export default [
  {
    title: "Venue",
    image: require("../assets/images/venue.jpg"),
    text: "2 out of 5",
    key: "1",
  },
  {
    title: "Ceremony",
    image: require("../assets/images/ceremony.jpg"),
    text: "3 out of 10",
    key: "2",
  },
  {
    title: "Learn a routine",
    image: require("../assets/images/routine.jpg"),
    text: "1 out of 4",
    key: "3",
  },
  {
    title: "Band",
    image: require("../assets/images/band.jpg"),
    text: "3 out of 4",
    key: "4",
  },
];

这是我在其中呈现类别组件的 Home 组件：

import React from "react";

import Header from "../components/Header";
import Category from "../components/Category";

import { View, SafeAreaView, StyleSheet } from "react-native";
import { colors } from "../styles/generalStyles";

const Home = () => {
  return (
    <SafeAreaView style={styles.safeArea}>
      <View style={styles.container}>
        <Header title="Category" />
        <Category />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
  },
  container: {
    flex: 1,
    paddingTop: 50,
    backgroundColor: `${colors.secondary}`,
  },
  list: {
    flex: 1,
  },
});

export default Home;

Answer 1

感谢您的帮助，我找到了解决方案，更好地研究了本机反应中 FlatList 的文档和示例： https://reactnative.dev/docs/flatlist

我已经创建了对象数组并在主视图之外构建了组件。 之后，在 Home 组件中，我构建了一个 function 来帮助渲染组件，然后将 function 传递给 FlatList renderItem prop：

import React from "react";

import Header from "../components/Header";

import {
 View,
 SafeAreaView,
 StyleSheet,
 FlatList,  
 Image,
 Text,
 TouchableOpacity,
} from "react-native";
import { colors } from "../styles/generalStyles";

/// The array of objects
const DATA = [
 {
   img: require("../assets/images/venue.jpg"),
   title: "Venue",
   text: "2 out of 3",
   key: "1",
 },
 {
   img: require("../assets/images/venue.jpg"),
   title: "Venue",
   text: "2 out of 3",
   key: "2",
 },
];

/// The component to be renderd in the FlatList
const Category = ({ img, title, text }) => (
 <TouchableOpacity>
   <Image source={img} />
   <Text>{title}</Text>
   <Text>{text}</Text>
 </TouchableOpacity>
);

const Home = () => {
 //using a function to render the component
 const renderCategory = ({ item }) => (
   <Category img={item.img} title={item.title} text={item.text} />
 );

 return (
   <SafeAreaView style={styles.safeArea}>
     <View style={styles.container}>
       <Header title="Category" />
       {/* passing the DATA and the renderCategory so it will display correctly */}
       <FlatList data={DATA} renderItem={renderCategory} />
     </View>
   </SafeAreaView>
 );
};

const styles = StyleSheet.create({
 safeArea: {
   flex: 1,
 },
 container: {
   flex: 1,
   paddingTop: 50,
   backgroundColor: `${colors.secondary}`,
 },
 list: {
   flex: 1,
 },
 category: {
   flex: 1,
 },
 imageContainer: {
   flex: 3,
   overflow: "hidden",
 },
 img: {
   height: "100%",
   width: "100%",
 },
 stats: {
   flex: 1,
   paddingVertical: 10,
   paddingHorizontal: 20,
   backgroundColor: `${colors.white}`,
 },
 textContainer: {
   flexDirection: "row",
   justifyContent: "space-between",
 },
 title: {
   fontFamily: "MulishBold",
   color: `${colors.lighterGrey}`,
 },
 text: {
   fontFamily: "Mulish",
   color: `${colors.lighterGrey}`,
 },
 lifeBar: {
   width: "100%",
   height: 14,
 },
 totalLife: {
   height: 14,
   backgroundColor: `${colors.orange}`,
 },
 actualLife: {
   position: "absolute",
   top: 0,
   left: 0,
   width: "40%",
   height: 13,
   backgroundColor: `${colors.primary}`,
   borderBottomEndRadius: 3,
   borderTopEndRadius: 3,
 },
});

export default Home;