kylefang/react-native-web
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-web.git synced 2026-01-12 22:51:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add PJPEG example to docs

Browse Source
This commit is contained in:
Nicolas Gallagher
2018-05-21 21:21:34 -07:00
parent 0816c40790
commit 48e62fcd64
3 changed files with 35 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
website/storybook/1-components/Image/examples/PropSource.js
View File

@@ -7,28 +7,36 @@ import React from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
const ImageSourceExample = () => (
<View style={styles.row}>
<View style={styles.column}>
<Text style={styles.text}>Static image</Text>
<Image source={sources.static} style={styles.image} />
<React.Fragment>
<View style={styles.row}>
<View style={styles.column}>
<Text style={styles.text}>Static image</Text>
<Image source={sources.static} style={styles.image} />
</View>
<View style={styles.column}>
<Text style={styles.text}>Progressive JPEG</Text>
<Image source={sources.pjpeg} style={styles.image} />
</View>
<View style={styles.column}>
<Text style={styles.text}>Animated GIF</Text>
<Image source={sources.animatedGif} style={styles.image} />
</View>
</View>
<View style={styles.column}>
<Text style={styles.text}>Animated GIF</Text>
<Image source={sources.animatedGif} style={styles.image} />
<View style={styles.row}>
<View style={styles.column}>
<Text style={styles.text}>PNG (base64)</Text>
<Image source={sources.dataBase64Png} style={styles.image} />
</View>
<View style={styles.column}>
<Text style={styles.text}>SVG (base64)</Text>
<Image source={sources.dataBase64Svg} style={styles.image} />
</View>
<View style={styles.column}>
<Text style={styles.text}>SVG (inline data)</Text>
<Image source={sources.dataSvg} style={styles.image} />
</View>
</View>
<View style={styles.column}>
<Text style={styles.text}>PNG (base64)</Text>
<Image source={sources.dataBase64Png} style={styles.image} />
</View>
<View style={styles.column}>
<Text style={styles.text}>SVG (base64)</Text>
<Image source={sources.dataBase64Svg} style={styles.image} />
</View>
<View style={styles.column}>
<Text style={styles.text}>SVG (inline data)</Text>
<Image source={sources.dataSvg} style={styles.image} />
</View>
</View>
</React.Fragment>
);
const styles = StyleSheet.create({

8
website/storybook/1-components/Image/examples/StaticGetSize.js
View File

@@ -26,7 +26,7 @@ class ImageGetSizeExample extends PureComponent {
<View>
{showButton ? (
<View style={styles.button}>
<Button onPress={this._handlePress} title="(4.7MB) Get image dimensions" />
<Button onPress={this._handlePress} title="Get image dimensions" />
</View>
) : null}
{startLoad ? (
@@ -55,12 +55,12 @@ const styles = StyleSheet.create({
},
image: {
backgroundColor: '#eee',
height: 227,
height: 230,
marginTop: 10,
width: 323
width: 320
}
});
const StaticGetSizeExample = () => <ImageGetSizeExample source={sources.huge} />;
const StaticGetSizeExample = () => <ImageGetSizeExample source={sources.pjpeg} />;
export default StaticGetSizeExample;

3
website/storybook/1-components/Image/sources/index.js
View File

@@ -39,6 +39,9 @@ const sources = {
huge: {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/d7/Chestnut-mandibled_Toucan.jpg'
},
pjpeg: {
uri: 'http://pooyak.com/p/progjpeg/jpegload.cgi?o=1'
},
dataSvg,
dataBase64Png,
dataBase64Svg