學習 React Native 16

圖像組件

如果說文本在應用程序中屬于最基礎常用的組件，那和他最有競爭的一定就是圖像組件了，對移動設備以及網站開發都是一樣。 在做網站開發時所寫的HTML以及CSS， 我們有很多方式來加載圖像： 有時是使用 標簽，也有時會通過 CSS語言加載圖片， 比方說你也許已經很熟悉的CSS 屬性，使用 background-image. 在 React-native, 我們有一個類似的 組件，但是他的行為略有不同。

對于組件來說，基本的用法很簡單，只要設備資源屬性即可：

上面 Require 函數是如何工作的？這個資源文件到底在什么位置上？對于這一部分的React Native 你需要根據你所開發所針對的不同平臺進行調整。 在iOS上， 這意味著你得通過 Xcode的 assets 文件夾將圖片文件輸入到您的項目中去。 如果正確的提供了兩倍大小或三倍大小，這些不同分辨率的圖片文件， Xcode 就可以幫助您實現圖片可以正確對應不同的設備平臺。 這對于習慣了網站開發的程序員來說絕對是一個提高： 在iOS上相對有限的屏幕大小及分辨率的組合，有了這個功能則意味著我們可以很容易的把應用加載到不同的iOS設備上。

對于其它平臺的 React Native 上的開發，我們希望 image! require 語法能夠和 Xcode 的資源管理的工作原理類似的方式。

這里需要提醒的是，React Native 也支持在您的應用里加入網絡上的圖片，而并不是一定要把該圖片輸入到你項目的資源庫中。 Facebook 在 UIExplorer的應用示例中特別展示了該功能：

當使用網絡資源時，您需要手動指定圖片的顯示大小。

通過網絡去加載圖片比直接將其加載到資源庫中有一定的好處。 在開發過程中，例如，當您在原型開發時，這種試會比較容易。不然您就得提前把文件導入到項目中，并同時要特別小心的輸入相關的文件信息。這種方法同時也能很大的減少你的應用包的大小，因此用戶在使用時，無須完全把您的資源庫都下載下來。但也存在不好的地方，就是意味著未來當別人在訪問您的程序時，要部分依賴于他人的數據了。 對于大多數情況，你需要避免使用 URI 方式的加載。

如果你還不知道如何使用用戶自己的圖片，我們將會在學習平臺規范的API時，詳細的了解一下相機膠卷。

因為React Native 強調的是組件為基礎的方法，圖片就一定得通過組件來加載，而不能象網站開發那般通過樣式表添加。 例如，上一章，我們想給天氣應用程序加一個背景圖片。 對于HTML加CSS 的這種方式開發網站，你可能會更習慣的是通過給背景圖設定他的屬性來實成，在React Native 中，你就只能使用 做為容器的一個組件來使用，象下面的代碼所示：

 {/* Your content here... */}

給圖片加樣式非常簡單。 要為圖片增加一些樣式，有一些屬性就可以直接完成了渲染工作了。 有些在以后的工作中可能會被經常用到： resizeMode 屬性，比方，他就可以給 封面或者是容器本身進行重置大小。 UIExplorer 應用很好的演示了這個屬性：

組件非常簡單，也很靈活。 你完全可以根據自己的應用需求對該功能進行擴展。

不深思則不能造于道。不深思而得者，其得易失。

名人名言- 曾國藩

• By 優聯實達
• 2015-12-21
• 2862
• 公司新聞，網站開發，網站設計，UI