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一致。

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屬性，最終實現效果如下圖所示：