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步驟做，然后運行項目