React-Native组件ImageBackground

Dear 丶 2022-05-30 04:53 264阅读 0赞

#### 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][react-native_ImageBackground]  
2.[react-native中背景图片属性ImageBackground-中文网][react-native_ImageBackground-]

#### 2.实例操作 ####

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

如上所示代码，通过宽高进行控制一个正方形，然后再通不过属性borderRadius进行控制圆角，由于是直径的一半，所以最终构造成圆形，在这个时候会出现在ios系统中仍然是一个正方形，需要使用属性`overflow: 'hidden',` 来控制最终圆角的形成，ios中默认给控件加圆角时圆角之外的图案是还在的，在react-native中需要设置css的一个样式 `overflow：hidden`属性，最终实现效果如下图所示：

![圆形图片效果图][70]

[react-native_ImageBackground]: https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting
[react-native_ImageBackground-]: https://reactnative.cn/docs/0.50/images.html#%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87%E7%BB%84%E4%BB%B6imagebackground
[70]: /images/20220530/5d6e0737164547f9a618cc16db4d8db9.png