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加载图片的三种方式：

  • 加载本地图片：

  • 加载网络图片

  • 加载APP中图片

     // 加载iOS项目Image.xcassets中的图片
     
    

• 注意：

  • 必须设置图片的宽和高，否则不会展示。
  • 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 (
      
        {/*cover*/}
        
        {/*contain*/}
        
        {/*stretch*/}
        
        {/*center*/}
        
      
    );
   }
  }
  

  • 效果图

    
    
    

    resizeMode.png

• 设置为背景图片

  
      {/*设置Text组件的背景为透明色*/}
       '登录' 
  
  

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

  
         {text} 
  
  

设置背景图.png