React Native组件系列之ImageBackground

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.

            
                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