React-Native之Image组件

获取屏幕尺寸

var Dimensions = require('Dimensions');            // 引入库
let ScreenW = Dimensions.get('window').width;      // 屏幕宽度
let ScreenH = Dimensions.get('window').height;     // 屏幕高度
let ScreenScale = Dimensions.get('window').scale;  // 分辨率

Image组件

• 导入Image组件库

  import {
    Image
  } from 'react-native';
  

• Image加载图片的三种方式：

  • 加载本地图片：

    <Image source={require('./Images/2.png')} style={{width: screenW, height: 200}} />
    

  • 加载网络图片

    <Image source={{uri: 'http://c.hiphotos.baidu.com/zhidao/pic/item/b3fb43166d224f4a228770fd08f790529922d1c5.jpg'}} style={{width: screenW, height: 200}} />
    

  • 加载APP中图片

     // 加载iOS项目Image.xcassets中的图片
     <Image source={{uri: 'picture1'}} style={{width: screenW, height: 200}} />
    

• 注意：

  • 必须设置图片的宽和高，否则不会展示。
  • iOS项目中加载非https图片时，需先设置info.plist文件中的App Transport Security Settings --> Allow Arbitrary Loads --> YES。

• Image的几种填充方式

  • cover: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全覆盖甚至超出容器，容器中不留任何空白。
  • contain: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全被包裹在容器中，容器中可能留有空白。
  • stretch: 拉伸图片且不维持宽高比，直到宽高都刚好填满容器。
  • repeat: 重复平铺图片直到填满容器。图片会维持原始尺寸。仅iOS可用。
  • center: 居中不拉伸。

  export default class ImageAssembly extends Component {
   render() {
    return (
      <View style={styles.container}>
        {/*cover*/}
        <Image source={require('./Images/resource.jpg')} style={{backgroundColor: '#00d1ff', width: 100, height: 100, marginTop: 20, resizeMode: 'cover'}} />
        {/*contain*/}
        <Image source={require('./Images/resource.jpg')} style={{backgroundColor: '#00d1ff', width: 100, height: 100, marginTop: 20, resizeMode: Image.resizeMode.contain}} />
        {/*stretch*/}
        <Image source={require('./Images/resource.jpg')} style={{backgroundColor: '#00d1ff', width: 100, height: 100, marginTop: 20, resizeMode: Image.resizeMode.stretch}} />
        {/*center*/}
        <Image source={require('./Images/resource.jpg')} style={{backgroundColor: '#00d1ff', width: 100, height: 100, marginTop: 20, resizeMode: Image.resizeMode.center}} />
      </View>
    );
   }
  }
  

  • 效果图

    
    resizeMode.png

• 设置为背景图片

  <Image
      source = {require('./resource/login/login_clickItem.png')}
      style = {styles.clickItemBackgroundStyle}>
      {/*设置Text组件的背景为透明色*/}
      <Text style = {{backgroundColor: 'transparent'}}> '登录' </Text>
  </Image>
  

• 但是，在react-native0.50.0之后，<Image>嵌套内容的写法就不再支持，而是使用<ImageBackground>组件。

  <ImageBackground  style = {styles.itemImageStyle}
        source = {{uri: 'http://s1.knowsky.com/20151011/62e25dd4cb882ab679df5b4e6a0be7f9.jpg'}}
  >
        <Text style = {styles.itemTextStyle}> {text} </Text>
  </ImageBackground>