Remove children support.
Keeping the API similar to Image.
This commit is contained in:
parent
6731991d14
commit
2df16ca038
36
FastImage.js
36
FastImage.js
|
@ -50,7 +50,13 @@ class FastImage extends Component {
|
|||
|
||||
const resolvedSource = resolveAssetSource(source)
|
||||
|
||||
if (!children && !borderRadius) {
|
||||
if (children) {
|
||||
throw new Error(
|
||||
'The <FastImage> component cannot contain children. If you want to render content on top of the image consider using absolute positioning.',
|
||||
)
|
||||
}
|
||||
|
||||
if (!borderRadius) {
|
||||
return (
|
||||
<FastImageView
|
||||
ref={e => (this._root = e)}
|
||||
|
@ -67,21 +73,18 @@ class FastImage extends Component {
|
|||
}
|
||||
|
||||
return (
|
||||
<View style={style} borderRadius={borderRadius}>
|
||||
<View style={styles.imageContainer} borderRadius={borderRadius}>
|
||||
<FastImageView
|
||||
ref={e => (this._root = e)}
|
||||
{...props}
|
||||
style={StyleSheet.absoluteFill}
|
||||
source={resolvedSource}
|
||||
onFastImageLoadStart={onLoadStart}
|
||||
onFastImageProgress={onProgress}
|
||||
onFastImageLoad={onLoad}
|
||||
onFastImageError={onError}
|
||||
onFastImageLoadEnd={onLoadEnd}
|
||||
/>
|
||||
</View>
|
||||
{children}
|
||||
<View style={[style, styles.imageContainer]} borderRadius={borderRadius}>
|
||||
<FastImageView
|
||||
ref={e => (this._root = e)}
|
||||
{...props}
|
||||
style={StyleSheet.absoluteFill}
|
||||
source={resolvedSource}
|
||||
onFastImageLoadStart={onLoadStart}
|
||||
onFastImageProgress={onProgress}
|
||||
onFastImageLoad={onLoad}
|
||||
onFastImageError={onError}
|
||||
onFastImageLoadEnd={onLoadEnd}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
@ -89,7 +92,6 @@ class FastImage extends Component {
|
|||
|
||||
const styles = StyleSheet.create({
|
||||
imageContainer: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
})
|
||||
|
|
|
@ -7,24 +7,20 @@ import Section from './Section'
|
|||
import FeatureText from './FeatureText'
|
||||
|
||||
const IMAGE_URL = 'https://media.giphy.com/media/GEsoqZDGVoisw/giphy.gif'
|
||||
const PLUS_IMAGE_URL =
|
||||
'https://cdn3.iconfinder.com/data/icons/block/32/add-512.png'
|
||||
|
||||
const BorderRadiusAndChildrenExample = ({ onPressReload, bust }) => (
|
||||
const BorderRadiusExample = ({ onPressReload, bust }) => (
|
||||
<View>
|
||||
<Section>
|
||||
<FeatureText text="• Border radius + children." />
|
||||
<FeatureText text="• Border radius." />
|
||||
</Section>
|
||||
<SectionFlex onPress={onPressReload}>
|
||||
<FastImage
|
||||
style={styles.image}
|
||||
borderRadius={100}
|
||||
borderRadius={50}
|
||||
source={{
|
||||
uri: IMAGE_URL + bust,
|
||||
}}
|
||||
>
|
||||
<FastImage style={styles.plus} source={{ uri: PLUS_IMAGE_URL }} />
|
||||
</FastImage>
|
||||
/>
|
||||
</SectionFlex>
|
||||
</View>
|
||||
)
|
||||
|
@ -46,4 +42,4 @@ const styles = StyleSheet.create({
|
|||
},
|
||||
})
|
||||
|
||||
export default withCacheBust(BorderRadiusAndChildrenExample)
|
||||
export default withCacheBust(BorderRadiusExample)
|
|
@ -4,7 +4,7 @@ import Icon from 'react-native-vector-icons/Ionicons'
|
|||
import Section from './Section'
|
||||
import PriorityExample from './PriorityExample'
|
||||
import GifExample from './GifExample'
|
||||
import BorderRadiusAndChildrenExample from './BorderRadiusAndChildrenExample'
|
||||
import BorderRadiusExample from './BorderRadiusExample'
|
||||
import FeatureText from './FeatureText'
|
||||
import ProgressExample from './ProgressExample'
|
||||
import PreloadExample from './PreloadExample'
|
||||
|
@ -27,7 +27,7 @@ const FastImageExample = () => (
|
|||
</Section>
|
||||
<PriorityExample />
|
||||
<GifExample />
|
||||
<BorderRadiusAndChildrenExample />
|
||||
<BorderRadiusExample />
|
||||
<ProgressExample />
|
||||
<PreloadExample />
|
||||
</View>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React, { Component } from 'react'
|
||||
import { View, StyleSheet, TouchableOpacity, Text } from 'react-native'
|
||||
import { View, StyleSheet } from 'react-native'
|
||||
import SectionFlex from './SectionFlex'
|
||||
import FastImage from 'react-native-fast-image'
|
||||
import Section from './Section'
|
||||
|
|
Loading…
Reference in New Issue