mirror of
https://github.com/status-im/react-native-fast-image.git
synced 2026-08-31 13:51:10 +00:00
Use prettier config file.
This commit is contained in:
@@ -9,76 +9,84 @@ 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'
|
||||
'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,
|
||||
}
|
||||
state = {
|
||||
show: false,
|
||||
url: IMAGE_URL,
|
||||
}
|
||||
|
||||
bustCache = () => {
|
||||
const key = uuid()
|
||||
const bust = `?bust=${key}`
|
||||
// Preload images. This can be called anywhere.
|
||||
const url = IMAGE_URL + bust
|
||||
this.setState({
|
||||
url,
|
||||
show: false,
|
||||
})
|
||||
}
|
||||
bustCache = () => {
|
||||
const key = uuid()
|
||||
const bust = `?bust=${key}`
|
||||
// Preload images. This can be called anywhere.
|
||||
const url = IMAGE_URL + bust
|
||||
this.setState({
|
||||
url,
|
||||
show: false,
|
||||
})
|
||||
}
|
||||
|
||||
preload = () => {
|
||||
FastImage.preload([{ uri: this.state.url }])
|
||||
}
|
||||
preload = () => {
|
||||
FastImage.preload([{ uri: this.state.url }])
|
||||
}
|
||||
|
||||
showImage = () => {
|
||||
this.setState({ show: true })
|
||||
}
|
||||
showImage = () => {
|
||||
this.setState({ show: true })
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<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 ? (
|
||||
<Image style={styles.image} source={{ uri: this.state.url }} />
|
||||
) : (
|
||||
<View style={styles.image} />
|
||||
)}
|
||||
<View style={{ flexDirection: 'row', marginHorizontal: 10 }}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Button text="Bust" onPress={this.bustCache} />
|
||||
render() {
|
||||
return (
|
||||
<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 ? (
|
||||
<Image
|
||||
style={styles.image}
|
||||
source={{ uri: this.state.url }}
|
||||
/>
|
||||
) : (
|
||||
<View style={styles.image} />
|
||||
)}
|
||||
<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>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
section: {
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
},
|
||||
image: {
|
||||
backgroundColor: '#ddd',
|
||||
margin: 10,
|
||||
height: 100,
|
||||
width: 100,
|
||||
},
|
||||
section: {
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
},
|
||||
image: {
|
||||
backgroundColor: '#ddd',
|
||||
margin: 10,
|
||||
height: 100,
|
||||
width: 100,
|
||||
},
|
||||
})
|
||||
|
||||
export default PreloadExample
|
||||
|
||||
Reference in New Issue
Block a user