将静态图像添加到 React Native 应用程序 webpack

Question

我已经使用 react-native-webpack-starter-kit 创建了一个项目，我正在尝试将静态图像添加到项目中以供使用。

https://github.com/jhabdas/react-native-webpack-starter-kit

我尝试简单地在 .js React 组件旁边添加一个图像文件夹（在 src/components 中）并尝试了以下操作，但 none 似乎有效。没有错误消息，但图像没有出现。

<Image source={require("image!add_people_icon")} style={styles.icon} />
<Image source={require("image!add_people_icon.png")} style={styles.icon} />
<Image source={require("./images/add_people_icon.png")} style={styles.icon} />

我在实际的xcode项目中有什么需要做的吗，比如将图片添加到那里的图片目录中？

我也在使用 webpack / fileloader 来提供图像。

Answer 1

将图像引用到 require 是错误的...

基本上它会去搜索 Xcode 项目中的那些文件所以有两种解决方案

解决方案1：在Xcode项目图片资源中添加各自的图片，然后就可以像上面那样使用了

解决方案 2：使用一些 cloudinary，它会给你一个绝对 url 我们可以将它用作

<Image style={/*ifneeded*/} source={{uri: ' //specify the url // '}} />

并且图像的样式应包含高度和宽度

将静态图像添加到 React Native 应用程序 webpack

Adding static images to React Native app webpack

reactjs

webpack

webpack-dev-server

react-native