React Native 需要 JSON 文件中的图像

Question

我正在尝试以更动态的方式显示文章。我制作了一个 JSON 文件，其中包含所有信息并循环遍历它，并为每个项目在主页上创建一个项目。这是有效的，并且显示了标题和文本。现在我在处理图像时遇到了麻烦。我没有收到任何错误，所以我想我可能需要处理我在 json 文件中调用的路径。

项目结构：

src
--articles
----img
------img.jpg
----articlePreview.js
----articles.json
----fullArticle.js
--homepage
----index.js 
App.js

正在测试 json，如您所见，我尝试了一些不同的路径并尝试了更多路径：

{
    "articles": [
        {
            "title": "Test",
            "imageName": "/img/img.jpg",
            "text": "more text to test"
        },
        {
            "title": "Test22",
            "imageName": "./img/img.jpg",
            "text": "more text to test"
        }
    ]
}

在主页上，我映射 json 文件中的所有项目，如下所示：

  const contents = json.articles.map(function (item) {
    return (
      <ArticleHome title={item.title} text={item.text} image={item.imageName} />
    );
 });

最后是应该显示它们的组件：

function ArticleHome({title, text, imageName}) {

  return (
    <View>
      <Card>
        <CardItem header bordered>
          <Body>
            <Image
              style={{ width: '100%', height: 400 }}
              source={{uri: imageName}} 
            />
            <Text>
              {title}
            </Text>
            <Text>
              {text.substring(0,240)}...
            </Text>
            <Button
              title="Lees Meer"
              color="#d10a10"
              onPress={() => RootNavigation.navigate('Article')}
            />
          </Body>
        </CardItem>

      </Card>
    </View>
  );
}

Answer 1

而不是以这种方式传递图像

"imageName": "/img/img.jpg",

你必须得到如下图。

imageName: require("./img/img.jpg"),

然后只需将此路径传递给您的 Image 标签

<Image source={imageName} />

这是一个演示点心。

https://snack.expo.io/@waheed25/smiling-carrot

编辑：这是一个使用您的代码的演示

https://snack.expo.io/@waheed25/c91df6

Answer 2

唯一对我有用的是使用 encode64 图像：

{ data.json = 
    "1":{
        "id":"1",
        "text": "test",
        "img": "encode64img" // something like data:image/png;base64,iVBORw0KGgoAAAA
    }
}

然后在您的应用中：

    import data from './data.json'
 const[uri, setUri] = useState(data[1].img)
 <Image style={styles.img} source={{uri: uri}}/>

React Native 需要 JSON 文件中的图像

React Native require image from JSON file

react-native

react-native-android