Make property names consistent and add example.
This commit is contained in:
Dylan Vann
parent
438fd11dc1
commit
8cafd670bf
|
|
@ -1,21 +1,27 @@
|
|||
import React from 'react'
|
||||
import { StyleSheet, Text, TouchableOpacity } from 'react-native'
|
||||
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
|
||||
|
||||
const Button = ({ text, onPress }) => (
|
||||
<TouchableOpacity onPress={onPress}>
|
||||
<Text style={styles.button}>{text}</Text>
|
||||
<View style={styles.button}>
|
||||
<Text style={styles.text}>{text}</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
)
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
button: {
|
||||
backgroundColor: 'black',
|
||||
color: 'white',
|
||||
margin: 5,
|
||||
padding: 5,
|
||||
height: 44,
|
||||
paddingLeft: 10,
|
||||
paddingRight: 10,
|
||||
borderRadius: 2,
|
||||
borderRadius: 10,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
text: {
|
||||
color: 'white',
|
||||
},
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -6,23 +6,32 @@ import Section from './Section'
|
|||
import FeatureText from './FeatureText'
|
||||
import uuid from 'uuid/v4'
|
||||
import Button from './Button'
|
||||
import { createImageProgress } from 'react-native-image-progress'
|
||||
|
||||
const IMAGE_URL =
|
||||
'https://cdn-images-1.medium.com/max/1600/1*-CY5bU4OqiJRox7G00sftw.gif'
|
||||
|
||||
const Image = createImageProgress(FastImage)
|
||||
|
||||
class PreloadExample extends Component {
|
||||
state = {
|
||||
show: false,
|
||||
url: IMAGE_URL,
|
||||
}
|
||||
|
||||
bustAndPreload = () => {
|
||||
bustCache = () => {
|
||||
const key = uuid()
|
||||
const bust = `?bust=${key}`
|
||||
// Preload images. This can be called anywhere.
|
||||
const url = IMAGE_URL + bust
|
||||
FastImage.preload([{ uri: url }])
|
||||
this.setState({ url, show: false })
|
||||
this.setState({
|
||||
url,
|
||||
show: false,
|
||||
})
|
||||
}
|
||||
|
||||
preload = () => {
|
||||
FastImage.preload([{ uri: this.state.url }])
|
||||
}
|
||||
|
||||
showImage = () => {
|
||||
|
|
@ -34,18 +43,25 @@ class PreloadExample extends Component {
|
|||
<View>
|
||||
<Section>
|
||||
<FeatureText text="• Preloading." />
|
||||
<FeatureText text="• Progress indication using react-native-image-progress." />
|
||||
</Section>
|
||||
<SectionFlex style={styles.section} onPress={this.props.onPressReload}>
|
||||
{this.state.show ? (
|
||||
<FastImage style={styles.image} source={{ uri: this.state.url }} />
|
||||
<Image style={styles.image} source={{ uri: this.state.url }} />
|
||||
) : (
|
||||
<View style={styles.image} />
|
||||
)}
|
||||
<Button
|
||||
text="Bust cache and preload."
|
||||
onPress={this.bustAndPreload}
|
||||
/>
|
||||
<Button text="Render image." onPress={this.showImage} />
|
||||
<View style={{ flexDirection: 'row', marginHorizontal: 10 }}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Button text="Bust" onPress={this.bustCache} />
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Button text="Preload" onPress={this.preload} />
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Button text="Render" onPress={this.showImage} />
|
||||
</View>
|
||||
</View>
|
||||
</SectionFlex>
|
||||
</View>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@
|
|||
"dependencies": {
|
||||
"react": "16.0.0",
|
||||
"react-native": "0.50.4",
|
||||
"react-native-fast-image": "file:../react-native-fast-image-2.0.0.tgz",
|
||||
"react-native-fast-image": "file:../react-native-fast-image-2.2.5.tgz",
|
||||
"react-native-image-progress": "^1.1.0",
|
||||
"react-native-vector-icons": "^4.4.2",
|
||||
"react-navigation": "^1.0.0-beta.21",
|
||||
"react-timeout": "^1.0.1",
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
|
||||
@implementation FFFastImageView {
|
||||
BOOL hasSentOnLoadStart;
|
||||
BOOL isComplete;
|
||||
BOOL hasError;
|
||||
BOOL hasCompleted;
|
||||
BOOL hasErrored;
|
||||
}
|
||||
|
||||
- (void)setResizeMode:(RCTResizeMode)resizeMode
|
||||
|
|
@ -16,18 +16,25 @@
|
|||
|
||||
- (void)setOnFastImageLoadEnd:(RCTBubblingEventBlock)onFastImageLoadEnd {
|
||||
_onFastImageLoadEnd = onFastImageLoadEnd;
|
||||
if (isComplete) {
|
||||
if (hasCompleted) {
|
||||
_onFastImageLoadEnd(@{});
|
||||
}
|
||||
}
|
||||
|
||||
- (void)setOnFastImageLoad:(RCTBubblingEventBlock)onFastImageLoad {
|
||||
_onFastImageLoad = onFastImageLoad;
|
||||
if (isComplete && hasError == NO) {
|
||||
if (hasCompleted) {
|
||||
_onFastImageLoad(@{});
|
||||
}
|
||||
}
|
||||
|
||||
- (void)setOnFastImageError:(RCTDirectEventBlock)onFastImageError {
|
||||
_onFastImageError = onFastImageError;
|
||||
if (hasErrored) {
|
||||
_onFastImageError(@{});
|
||||
}
|
||||
}
|
||||
|
||||
- (void)setOnFastImageLoadStart:(RCTBubblingEventBlock)onFastImageLoadStart {
|
||||
if (_source && !hasSentOnLoadStart) {
|
||||
_onFastImageLoadStart = onFastImageLoadStart;
|
||||
|
|
@ -41,16 +48,13 @@
|
|||
|
||||
- (void)setSource:(FFFastImageSource *)source {
|
||||
if (_source != source) {
|
||||
isComplete = NO;
|
||||
hasError = NO;
|
||||
|
||||
_source = source;
|
||||
|
||||
|
||||
// Set headers.
|
||||
[_source.headers enumerateKeysAndObjectsUsingBlock:^(NSString *key, NSString* header, BOOL *stop) {
|
||||
[[SDWebImageDownloader sharedDownloader] setValue:header forHTTPHeaderField:key];
|
||||
}];
|
||||
|
||||
|
||||
// Set priority.
|
||||
SDWebImageOptions options = 0;
|
||||
options |= SDWebImageRetryFailed;
|
||||
|
|
@ -65,33 +69,33 @@
|
|||
options |= SDWebImageHighPriority;
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
if (_onFastImageLoadStart) {
|
||||
_onFastImageLoadStart(@{});
|
||||
hasSentOnLoadStart = YES;
|
||||
} {
|
||||
hasSentOnLoadStart = NO;
|
||||
}
|
||||
|
||||
hasCompleted = NO;
|
||||
hasErrored = NO;
|
||||
|
||||
// Load the new source.
|
||||
[self sd_setImageWithURL:_source.uri
|
||||
placeholderImage:nil
|
||||
options:options
|
||||
progress:^(NSInteger receivedSize, NSInteger expectedSize, NSURL * _Nullable targetURL) {
|
||||
double progress = MIN(1, MAX(0, (double) receivedSize / (double) expectedSize));
|
||||
if (_onFastImageProgress) {
|
||||
_onFastImageProgress(@{
|
||||
@"loaded": @(receivedSize),
|
||||
@"total": @(expectedSize)
|
||||
});
|
||||
@"loaded": @(receivedSize),
|
||||
@"total": @(expectedSize)
|
||||
});
|
||||
}
|
||||
} completed:^(UIImage * _Nullable image,
|
||||
NSError * _Nullable error,
|
||||
SDImageCacheType cacheType,
|
||||
NSURL * _Nullable imageURL) {
|
||||
isComplete = YES;
|
||||
if (error) {
|
||||
hasError = YES;
|
||||
hasErrored = YES;
|
||||
if (_onFastImageError) {
|
||||
_onFastImageError(@{});
|
||||
if (_onFastImageLoadEnd) {
|
||||
|
|
@ -99,6 +103,7 @@
|
|||
}
|
||||
}
|
||||
} else {
|
||||
hasCompleted = YES;
|
||||
if (_onFastImageLoad) {
|
||||
_onFastImageLoad(@{});
|
||||
if (_onFastImageLoadEnd) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue