React Native 四：圖片

1、展現圖片資源 

1.在ReactNative中。圖片使用Image組件進行展現，如下咱們就以靜態、混合和網絡資源等多種方式演示圖片展現。

2.將圖片放在代碼目錄img處；

3.編輯index.android.js文件。像例如如下方式引用它；

Index.android.js文件

import React, {
    … …   
} from 'react-native';
class AwesomeProject extends Component {
  render() {
    var icon = false ? require('./img/my-icon-active.png') : require('./img/my-icon-inactive.png');
　// 錯誤
　//var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
    return (
      <View>
        //靜態資源
        <Image style={styles.img} source={require('./img/my-icon-active.png')}/>
        <Image style={styles.img} source={icon} />
　　//錯誤：require中的圖片名字必須是一個靜態字符
　　//<Image source={require('./' + icon + '.png')} />

　　//混合資源。使用已將打包到App中的圖片資源
        <Image style={styles.img} source={{uri:'my-icon-active.png'}} />

　　//網絡資源，需要手動的指定圖片的尺寸
        <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
               style={{width: 400, height: 400}} />
      </View>
    );
  }
}
var styles = StyleSheet.create({
  img:{
    … … 
  },
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

4.執行效果例如如下：