React-Native组件ImageBackground

1.基础知识

在RN版本0.46版本的时候添加了ImageBackground控件，在0.46版本以后使用Image的时候不能在嵌套使用，ImageBackground就是解决这个问题的，现在如果在 标签中嵌套其他组件现在会报黄盒警告。ImageBackground的使用和Image一样，只不过可以嵌套其他组件了。

在 “react-native”: “0.54.0”,中，直接会出现红屏，使用的方式如下所示：

<ImageBackground
style={{height:100,width:300}}
resizeMode='cover'
>
<Text style={{color:'red',fontSize:24}}> image 嵌入 text</Text>
</ImageBackground>

下面是具体的实现代码：

/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ImageBackground
* @flow
* @format
*/
'use strict';

const Image = require('Image');
const React = require('React');
const StyleSheet = require('StyleSheet');
const View = require('View');

const ensureComponentIsNative = require('ensureComponentIsNative');

import type {NativeMethodsMixinType} from 'ReactNativeTypes';

/**
* Very simple drop-in replacement for <Image> which supports nesting views.
*
* ```ReactNativeWebPlayer
* import React, { Component } from 'react';
* import { AppRegistry, View, ImageBackground, Text } from 'react-native';
*
* class DisplayAnImageBackground extends Component {
*   render() {
*     return (
*       <ImageBackground
*         style={{width: 50, height: 50}}
*         source={{uri: 'https://facebook.github.io/react-native/img/opengraph.png'}}
*       >
*         <Text>React</Text>
*       </ImageBackground>
*     );
*   }
* }
*
* // App registration and rendering
* AppRegistry.registerComponent('DisplayAnImageBackground', () => DisplayAnImageBackground);
* ```
*/
class ImageBackground extends React.Component<$FlowFixMeProps> {
setNativeProps(props: Object) {
// Work-around flow
const viewRef = this._viewRef;
if (viewRef) {
ensureComponentIsNative(viewRef);
viewRef.setNativeProps(props);
}
}

_viewRef: ?NativeMethodsMixinType = null;

_captureRef = ref => {
this._viewRef = ref;
};

render() {
const {children, style, imageStyle, imageRef, ...props} = this.props;

return (
<View style={style} ref={this._captureRef}>
<Image
{...props}
style={[
StyleSheet.absoluteFill,
{
// Temporary Workaround:
// Current (imperfect yet) implementation of <Image> overwrites width and height styles
// (which is not quite correct), and these styles conflict with explicitly set styles
// of <ImageBackground> and with our internal layout model here.
// So, we have to proxy/reapply these styles explicitly for actual <Image> component.
// This workaround should be removed after implementing proper support of
// intrinsic content size of the <Image>.
width: style.width,
height: style.height,
},
imageStyle,
]}
ref={imageRef}
/>
{children}
</View>
);
}
}

module.exports = ImageBackground;

从代码可以看出，只是仅仅对 Image 进行了View的包装而已，并且能够看到将包含在ImageBackground 中的 children 使用Image进行了包装，给外层抛出一下三个接口： style, imageStyle, imageRef，从官网能够得知，唯一的不同就是名字的不同，属性与用法完全和Image一致。

官网说明如下链接：

1.react-native中背景图片属性ImageBackground

2.react-native中背景图片属性ImageBackground-中文网

2.实例操作

如何将背景图片修饰为圆形，并且在里边输入文字

<ImageBackground
source={imageSrc}
style={{
justifyContent: 'center',
alignItems: 'center',
width: 60,
height: 60,
resizeMode: 'cover',
borderRadius: 60 / 2,
cursor: 'pointer',
overflow: 'hidden',
borderWidth: 0,
borderColor: 'rgba(200,200,200,0.5)'
}}
>
<Text>{'客'}</Text>
</ImageBackground>

如上所示代码，通过宽高进行控制一个正方形，然后再通不过属性borderRadius进行控制圆角，由于是直径的一半，所以最终构造成圆形，在这个时候会出现在ios系统中仍然是一个正方形，需要使用属性

overflow: 'hidden',

来控制最终圆角的形成，ios中默认给控件加圆角时圆角之外的图案是还在的，在react-native中需要设置css的一个样式

overflow：hidden

属性，最终实现效果如下图所示：