React Native组件系列之ImageBackground

Posted 2020-10-10 做一个清醒者

这个组件是在0.46.4新加入的一个组件，加入该组件的原因

https://github.com/facebook/react-native/commit/9637dd4a1b78d5f6da510b1b4ad10d45d67badbf

注意：该组件还未真正上完全实现下面的目的

Summary:
We are removing support of nesting views inside <Image> component. We decided to do this because having this feature makes supporting `intrinsinc content size` of the `<Image>` impossible; so when the transition process is complete, there will be no need to specify image size explicitly, it can be inferred from actual image bitmap.

And this is the step #0.

<ImageBackground> is very simple drop-in replacement which implements this functionality via very simple styling.
Please, use <ImageBackground> instead of <Image> if you want to put something inside.

大致的意思是：如果要在<Image>组件里面嵌套布局，后面需要用<ImageBackground>组件替代(现在在<Image>里面嵌套子元素，会报警告),目的是为了解决前面使用<Image>组件时，必须明确赋值图片的大小（width和height）,<ImageBackground>可以根据图片的实际大小计算整个容器的大小

 

源代码:

RN  0.49的代码，跟0.46的代码差别较大
/**
 * 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/img/logo_og.png‘}}
 *       >
 *         <Text>React</Text>
 *       </ImageBackground>
 *     );
 *   }
 * }
 *
 * // App registration and rendering
 * AppRegistry.registerComponent(‘DisplayAnImageBackground‘, () => DisplayAnImageBackground);
 * ```
 */
class ImageBackground extends React.Component {
  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;

StyleSheet.js

const absoluteFillObject = {
  position: ‘absolute‘,
  left: 0,
  right: 0,
  top: 0,
  bottom: 0,
};
const absoluteFill = ReactNativePropRegistry.register(absoluteFillObject); // This also freezes it

 

可以看到，这个组件的代码很简单，知识将<Image>外面套了一层View，然后将子元素chilren放在里面，目前的代码并不完美，还是需要设置 style里面的宽高( 此时的style是整个容器的宽高，而不是图片的，但是容器里面的背景图的宽高默认跟容器的宽高一致)

,因为根据图片自动计算容器大小的高度的代码还未实现

 

建议：

1.如果是RN 0.49以上的版本，还是使用Image组件（会有警告）,使用该组件最好在最新的RN版本下使用

2.RN 0.49以前有一个很严重的bug，在<ImageBackground>里面嵌套Touchable*组件会直接报错:

https://github.com/facebook/react-native/commit/dc97e3fb4e1a297d18b9361710290468060626fc