React Native 中文 - BackgroundImage 组件

React Native 中的 ImageBackground 组件实现了使用 图片 作为背景这一功能。

ImageBackground 组件的功能有点类似于 HTMLCSS 中的 background-image 属性。

我们知道,<Image> 组件是一个类似于 HTML 中的 <img> 标签,它们都是 空标签,是不可能子组件。 而且原生 Android 和 iOS 中都没有 background-image 这一属性,那么,ImageBackground 是怎么实现的呢 ?

ImageBackground 组件实现了 <Image> 同样的属性,也就说,具有 resizeModesource 两个重要属性。

额外的,ImageBackground 组件还可以添加自己的 子元素 浮在背景图片之上,这样就实现了背景图片的效果。

当然了,因为 React Native 同样实现了 CSS 中的 position:absolute 样式属性,所以,我们可以自己定制一个 ImageBackground 组件,你可以参考 <ImageBackground>源代码 ,个人认为,这个源代码还是值得深入阅读的。

如果想要定制 ImageBackground 组件中的图片样式,可以通过设置 imageStyle 属性

使用语法

<ImageBackground 
  source={...} 
  style={{width: '100%', height: '100%'}}>
    <Text>Inside</Text>
</ImageBackground>

属性

属性 必填 说明
Image props... 和 Image 有着相同的属性
style 整个 ImageBackground 的样式
imageStyle 用于定制 ImageBackground 中的图片组件 Image 的样式
imageRef ImageBackground 中的图片组件 Image 的引用

范例

下面的范例演示了 ImageBackground 组件的基本使用

import React, {Component} from 'react';
import {Text,View,ImageBackground} from 'react-native';

export default class App extends Component{

  constructor(props) {
    super(props);
    this.imgRef = React.createRef();
  }

  render() {
    return (
      <View>
        <ImageBackground
          style={{width:300,height:169}} 
          source={{uri:'https://www.twle.cn/static/i/img1.jpg'}}
          imageRef={this.myRef}
          imageStyle={{width:300,height:169}}>
          <Text>简单教程简单编程</Text>
          <Text>https://www.twle.cn</Text>
        </ImageBackground>
      </View>
    );
  }
}

React Native 中文文档

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.