在Android上使用URI反應本機本地圖像

Question

我搜索了四周，並沒有完全找到正確的解決方案。我有添加本地文件夾參考XCode項目後顯示圖像上使用下面的代碼iOS的URI沒有問題的應用程序：

<Image style={styles.catimg} source={{uri: "imgs/1.png"}} /> 

但在Android上，我不能完全弄清楚哪裏放圖像和如何在代碼中引用它們。有些人說過在android/app/src/main/res/drawable-hdpi中有一個名爲'drawable-hdpi'的文件夾，但是如果這個文件夾被添加到那裏，構建失敗。目前只有mipmap文件夾。

Answer 1

React Native Image doc非常好！

靜態圖像

由於發生反應原住民0.14，他們建議使用靜態圖像，像這樣：

<Image style={styles.catimg} source={require("./imgs/1.png")} /> 

這裏有一些好處，您將獲得：

1. 同一系統上的iOS和Android系統。
2. 圖像與您的JS代碼位於相同的文件夾中。組件是獨立的。
3. 沒有全局名稱空間，即您不必擔心名稱衝突。
4. 只有實際使用的圖像纔會打包到您的應用中。
5. 添加和更改圖像不需要重新編譯應用程序，只需像平常一樣刷新模擬器即可。
6. 包裝商知道圖像尺寸，不需要在代碼中複製它。
7. 圖像可以通過npm包分發。

圖片來自本機側

但是，您可能仍然想使用來自本機端的圖像，如果例如，你正在建設一個混合的應用程序（一些用戶界面的陣營本土，一些用戶界面的平臺代碼）。

在Android上，確實會從android/app/src/main/res/drawable-*文件夾中讀取圖像。

當您創建新的React Native應用程序時，僅存在mipmap文件夾。 mipmap文件夾僅適用於您的應用/啓動器圖標。您使用的任何其他可繪製資產應該像以前一樣放置在相關的可繪製文件夾中。 More info here。

因此，您需要創建至少一個drawable文件夾，比如android/app/src/main/res/drawable-hdpi，然後將您的圖像imgs_1.png放入其中。

不幸的是，drawable文件夾不能包含子目錄。 More info here。

此外，圖像名稱必須以字母開頭，並且只能包含小寫字母，數字或非內核字符。例如，See this。

然後你就可以用你的形象就是這樣，不帶擴展名：

<Image style={styles.catimg} source={{uri: "imgs_1"}} />