React native(iOS)打包之后Image不显示问题

React Native & iOS

静态图片不显示问题

React Native本身问题就是有的，最近我们的项目进化到了React Native和OC的混编问题就更多了，其中就有打包之后静态图片不显示的问题。

解决

• 不显示原因

  
  英文文档
  中文文档

• 具体从打包不显示到打包显示
  1， 在根目录创建Dist文件夹

  
  创建Dist文件夹

2， 运行打包命令
react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output Dist/ios.jsbundle运行之后Dist文件夹下会生成两个文件ios.jsbundle, ios.jsbundle.meta

生成文件

3，将Dist文件夹拖入项目

屏幕快照 2017-07-06 上午10.00.44.png

4，当前代码

<Image style={styles.icon}  source={require('./icon.png')} />

这个时候图片是不会显示的，原因就是官方文档说的，见不显示原因。

5，在根目录创建asset文件夹

创建asset文件夹

将静态图片拖入asset文件夹

加入静态图片

6，把asset文件夹拖入项目

asset文件夹拖入项目

7，修改代码

<Image style={styles.icon}  source={{uri:'icon'}} />

注意这个时候icon不能加后缀名

8， 再次按照2，3步骤做，然后运行项目