ReactNative：本地影像不適用于ReactNative中的FlatList？-有解無憂

我正在嘗試構建 React-Native 應用程式，我在專案中有 4 張影像，我正在嘗試通過 Flatlist 顯示它們。我將影像鏈接放入陣列中。我嘗試通過 Render 項檢索影像，但它向我顯示此錯誤我做錯了什么？解決辦法是什么？

我的陣列

const categoryData = [
    {
      title: 'middle east food',
      image: '../assets/image/category1.png',
      ALIAS: 'mediterranean, All',
    },
    {
      title: 'mexican food',
      image: '../assets/image/category2.jpg',
      ALIAS: 'easternmexican',
    },
    {
      title: 'Spanish Food',
      image: '../assets/image/category3.png',
      ALIAS: 'spanish, All',
    },
    {
      title: 'Turkish Food',
      image: '../assets/image/category4.jpg',
      ALIAS: 'turkish, All',
    },
  ];

平面串列代碼

<FlatList
            horizontal
            data={categoryData}
            renderItem={({item}) => (
              <Pressable>
                <Image source={require(item.image)}/>
                <Text>{item.title}</Text>
              </Pressable>
            )}
          />

錯誤在此處輸入影像描述

uj5u.com熱心網友回復：

我的解決方案：

  const categoryData = [
    {
      title: 'middle east food',
      image: require('../assets/image/category1.png'),
      ALIAS: 'mediterranean, All',
    },
    {
      title: 'mexican food',
      image: require('../assets/image/category2.jpg'),
      ALIAS: 'easternmexican',
    },
    {
      title: 'Spanish Food',
      image: require('../assets/image/category3.png'),
      ALIAS: 'spanish, All',
    },
    {
      title: 'Turkish Food',
      image: require('../assets/image/category4.jpg'),
      ALIAS: 'turkish, All',
    },
  ]; 




 <FlatList
                horizontal
                data={categoryData}
                renderItem={({item}) => (
                  <Pressable>
                    <Image
                      showsHorizontalScrollIndicator
                      resizeMode="stretch"
                      style={[
                        styles.categoryImg,
                        {width: width / 2.25, height: width / 2.25},
                      ]}
                      source={item.image}
                    />

uj5u.com熱心網友回復：

您可以傳遞呈現影像組件的箭頭函式，而不是將路徑作為資料傳遞。

  const categoryData = [
    {
      title: 'middle east food',
      image: () => <Image source={require('../assets/image/category1.png')} />,
      ALIAS: 'mediterranean, All',
    },
    {
      title: 'mexican food',
      image: () => <Image source={require('../assets/image/category2.png')} />,
      ALIAS: 'easternmexican',
    },
    {
      title: 'Spanish Food',
      image: () => <Image source={require('../assets/image/category3.png')} />,
      ALIAS: 'spanish, All',
    },
    {
      title: 'Turkish Food',
      image: () => <Image source={require('../assets/image/category4.png')} />,
      ALIAS: 'turkish, All',
    },
  ];

然后只需將 categoryData 傳遞給 FlatList 的 data 屬性。也只需呼叫 {item.image()}

<FlatList
      horizontal
      data={categoryData}
      renderItem={({item}) => {
        return (
          <Pressable>
            {item.image()}
            <Text>{item.title}</Text>
          </Pressable>
        );
      }}
    />

這絕對會解決你的問題伙伴！

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/422630.html

標籤：

上一篇：React-Native應用程式（iOS和Android）的性能不佳

下一篇：如何在ReactNativeExpoNotifications中安排“生日”通知？