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*/}
          
        
      );
     }
    }
    
    • 效果图


      React-Native之Image组件_第1张图片
      resizeMode.png
  • 设置为背景图片

    
        {/*设置Text组件的背景为透明色*/}
         '登录' 
    
    
  • 但是,在react-native0.50.0之后,嵌套内容的写法就不再支持,而是使用组件。

    
           {text} 
    
    
设置背景图.png

你可能感兴趣的:(React-Native之Image组件)