ReactNative组件系列之ImageBackground
这个组件是在0.46.4新加⼊的⼀个组件，加⼊该组件的原因
注意：该组件还未真正上完全实现下⾯的⽬的
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 w 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: 'facebook.github.io/react/img/logo_og.png'}}
*      >
*        <Text>React</Text>
*      </ImageBackground>
*    );
*  }
* }
*
* // App registration and rendering
* isterComponent('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}react to do
/>
{children}
</View>
);
}
}
StyleSheet.js
const absoluteFillObject = {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
};
const absoluteFill = ister(absoluteFillObject); // This also freezes it
可以看到，这个组件的代码很简单，知识将<Image>外⾯套了⼀层View，然后将⼦元素chilren放在⾥⾯，⽬前的代码并不完美，还是需要设置 style⾥⾯的宽⾼( 此时的style是整个容器的宽⾼，⽽不是图⽚的，但是容器⾥⾯的背景图的宽⾼默认跟容器的宽⾼⼀致)
，因为根据图⽚⾃动计算容器⼤⼩的⾼度的代码还未实现
建议：
1.如果是RN 0.49以上的版本，还是使⽤Image组件（会有警告），使⽤该组件最好在最新的RN版本下使⽤
2.RN 0.49以前有⼀个很严重的bug，在<ImageBackground>⾥⾯嵌套Touchable*组件会直接报错:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。