react-native試玩(7)-圖片控制項

Image Image

展現圖片的控制項 屬性

名稱	類型	意義	預設值
onLayout	function	布局改變時調用該屬性設定的函數	無
resizeMode	enum	當圖片和控制項大小不匹配時採取什麼規則來調整圖片(‘cover’, ‘contain’, ‘stretch’)	cover
source	{uri:string}, number	指定圖片資源	無
style	style	樣式	無
testID	String	UI Automation 測試指令碼中用到的id號	無
accessibilityLabel	String	(iOS特有)使用者可以通過該文本與Image控制項互動	無
accessible	bool	(iOS特有)指代該控制項是否是accessibility元素	true
capInsets	{top:number, left:number, bottom:number, right:number}	(iOS特有)調整圖片大小時，設定布局	無
defaultSource	{uri: string}	(iOS特有)當網路斷開後，預設顯示的靜態圖片	無
onError	function	(iOS特有)當下載失敗後調用的函數	無
onLoad	function	(iOS特有)當完成調用載入函數後調用的函數	無
onLoadEnd	function	(iOS特有)完成載入後，成功或者失敗以後調用的函數	無
onLoadStart	function	(iOS特有)載入開始	無
onProgress	function	(iOS特有)載入中	無

執行個體 網路資源

<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 400, height: 400}} />

最好設定下Image控制項的尺寸，如果你不設定，可能顯示不出來。 靜態資源

1.首先在項目的Images.xcassets檔案夾下建立我們的圖片檔案夾：

我取名為logo.imageset，尾碼要以imageset結尾。把我們的圖片放到這個檔案夾下：

注意這個地方圖片的檔案名稱要和檔案夾的名字一致。

2.這個時候我們回到Xcode中，點擊項目中Images.xcassets檔案夾：

這個時候可以看到logo檔案夾下的圖片，我們將圖片從Unassigned一欄拖到上面的1x 2x 3x隨意一欄中，然後重新build一下項目。

3.在react-native項目中添加Image控制項：

var React = require('react-native');var {    Image,    AppRegistry,    StyleSheet,    View,} = React;    var helloworld = React.createClass({    render: function() {        return (        <Image source={ require('image!logo')} style={{width: 400, height: 400}}/>        );    }    });var styles = StyleSheet.create({});AppRegistry.registerComponent('hellowrold',() => helloworld);

從源碼中可以看出，匯入靜態圖片的奇特之處在於使用require語句，將其作為模組匯入到Image控制項中。

4.效果

Android

在Android版本下實驗通過，代碼一樣。