如何將json檔案中的本地影像放入react-native？

大家好，我正在嘗試在我的 json 中鏈接本地影像（包含在我的影像檔案中），但它似乎不起作用。我試過這樣：

    [
  {
    "id": 1,
    "author": "Virginia Woolf",
    "country": "United Kingdom",
    "imageLink": "../images/img_libro1.jpeg",
    "language": "English",
    "overview": "Mrs. Dalloway, novel by Virginia Woolf published in 1925. It examines one day in the life of Clarissa Dalloway, an upper-class Londoner married to a member of Parliament. Mrs. Dalloway is essentially plotless; what action there is takes place mainly in the characters’ consciousness. The novel addresses the nature of time in personal experience through multiple interwoven stories, particularly that of Clarissa as she prepares for and hosts a party and that of the mentally damaged war veteran Septimus Warren Smith. The two characters can be seen as foils for each other.",
    "link": "https://en.wikipedia.org/wiki/Mrs_Dalloway\n",
    "pages": 216,
    "title": "Mrs Dalloway",
    "year": 1925,
    "vote": "8",
    "aspectRatio": 1
  },

在組件中我這樣稱呼鏈接：

import {useNavigation} from '@react-navigation/native';
import React from 'react';
import {View, StyleSheet, Text, Image, TouchableHighlight} from 
'react-native';

export default function AudiosBooksBox({
  title,
  width,
  aspectRatio,
  author,
  imageLink,
  country,
  overview,
  vote,
  duration,
  actor,
  year,
  pages,
  link,
  language,
}: any) {
  const navigation = useNavigation();
  return (
    <View>
      <View
        style={{
          width: width,
          height: width * aspectRatio,
          marginBottom: 10,
          borderRadius: 20,
        }}>
        {imageLink && (
          <TouchableHighlight
            onPress={() =>
              navigation.navigate('SingleBook', {
                title,
                year,
                pages,
                link,
                language,
                imageLink,
                country,
                author,
                overview,
                vote,
                duration,
                actor,
              })
            }>
            <Image style={styles.image} source={imageLink} />
          </TouchableHighlight>
        )}
        {!imageLink && <Text>immagine mancante</Text>}
      </View>

      <View style={styles.wrap}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.title}>{author}</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  title: {
    color: '#1C0D45',
  },
  image: {
    height: '100%',
    borderRadius: 20,
    marginLeft: 10,
    marginRight: 5,
  },
  wrap: {
    marginTop: 10,
    marginBottom: 10,
    width: 180,
    textAlign: 'center',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

它沒有給我任何錯誤，并且有影像的形狀但沒有影像。我怎樣才能做到這一點？預先謝謝你。這些是我的檔案夾：

uj5u.com熱心網友回復：

首先，您需要修改您的 JSON 以僅發送像這樣的本地影像名稱，（不帶 .jpeg）

{
    "id": 1,
    "author": "Virginia Woolf",
    "country": "United Kingdom",
    "imageLink": "img_libro1",
    "language": "English",
    "overview": "Mrs. Dalloway, novel by Virginia Woolf published in 1925. It examines one day in the life of Clarissa Dalloway, an upper-class Londoner married to a member of Parliament. Mrs. Dalloway is essentially plotless; what action there is takes place mainly in the characters’ consciousness. The novel addresses the nature of time in personal experience through multiple interwoven stories, particularly that of Clarissa as she prepares for and hosts a party and that of the mentally damaged war veteran Septimus Warren Smith. The two characters can be seen as foils for each other.",
    "link": "https://en.wikipedia.org/wiki/Mrs_Dalloway\n",
    "pages": 216,
    "title": "Mrs Dalloway",
    "year": 1925,
    "vote": "8",
    "aspectRatio": 1
  }

然后在您的代碼中，嘗試像這樣訪問影像

const localImages = {
    img_libro1: require('../images/img_libro1.jpeg'),
    img_libro2: require('../images/img_libro2.jpeg'),
    img_libro3: require('../images/img_libro3.jpeg'),
  };
  // some code..
  <Image source={localImages[imageLink]} />;

標籤：json打字稿反应式

上一篇：升級后我的物體不再暴露在APIPLATFORM上

下一篇：從jsonappendchild到錯誤的父級的Html生成器