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>

设置背景图.png

最后编辑于：2017.11.28 10:19:28