已开启
react-native-fast-image 接入 imageknife C化 demo #576
libo729创建于 1月4日
react-native-fast-image 接入 imageknife C化 demo #576
已开启
共 4 个文件变更+222-0
| @@ -0,0 +1,72 @@ | |||
| 1 | +import React from "react"; | ||
| 2 | +import { StyleSheet, View, ScrollView, Button } from "react-native"; | ||
| 3 | +import FastImage, { | ||
| 4 | + ResizeMode, | ||
| 5 | + OnLoadEvent, | ||
| 6 | + OnProgressEvent, | ||
| 7 | + Priority | ||
| 8 | +} from "react-native-fast-image"; | ||
| 9 | + | ||
| 10 | +export const FastImageExampleHigh = () => { | ||
| 11 | + return ( | ||
| 12 | + <ScrollView> | ||
| 13 | + <View style={{gap: 5}}> | ||
| 14 | + <FastImage | ||
| 15 | + style={styles.image} | ||
| 16 | + source={{ | ||
| 17 | + priority: "high", | ||
| 18 | + cache: "web", | ||
| 19 | + uri: "https://res8.vmallres.com/pimages/uomcdn/CN/pms/202205/gbom/6941487259298/428_428_D7BFF22D4678EB68440F914B352214C4mp_tds.png", | ||
| 20 | + headers: {Authorization: 'someAuthToken'} | ||
| 21 | + }} | ||
| 22 | + resizeMode={FastImage.resizeMode.contain} | ||
| 23 | + onLoadStart={() => { | ||
| 24 | + console.log("onLoadStart: success"); | ||
| 25 | + }} | ||
| 26 | + onProgress={(e: OnProgressEvent) => { | ||
| 27 | + console.log( | ||
| 28 | + "onProgress: success loaded=" + | ||
| 29 | + e.nativeEvent.loaded + | ||
| 30 | + " total=" + | ||
| 31 | + e.nativeEvent.total | ||
| 32 | + ); | ||
| 33 | + }} | ||
| 34 | + onLoad={(e: OnLoadEvent) => { | ||
| 35 | + console.log( | ||
| 36 | + "onLoad: success width=" + | ||
| 37 | + e.nativeEvent.width + | ||
| 38 | + " height=" + | ||
| 39 | + e.nativeEvent.height | ||
| 40 | + ); | ||
| 41 | + }} | ||
| 42 | + onError={() => { | ||
| 43 | + console.log("onError: success"); | ||
| 44 | + }} | ||
| 45 | + onLoadEnd={() => { | ||
| 46 | + console.log("onLoadEnd: success"); | ||
| 47 | + }} | ||
| 48 | + /> | ||
| 49 | + <Button title="preload" onPress={()=>{ | ||
| 50 | + const h = [{ | ||
| 51 | + priority: "high", | ||
| 52 | + cache: "web", | ||
| 53 | + uri: "https://res8.vmallres.com/pimages/uomcdn/CN/pms/202205/gbom/6941487259298/428_428_D7BFF22D4678EB68440F914B352214C4mp_tds.png", | ||
| 54 | + headers: {'Authorization': 'someAuthToken1'} | ||
| 55 | + }] | ||
| 56 | + FastImage.preload(h) | ||
| 57 | + }}></Button> | ||
| 58 | + <Button title="clearMemoryCache" onPress={FastImage.clearMemoryCache}></Button> | ||
| 59 | + <Button title="clearDiskCache" onPress={FastImage.clearDiskCache}></Button> | ||
| 60 | + </View> | ||
| 61 | + </ScrollView> | ||
| 62 | + ); | ||
| 63 | +}; | ||
| 64 | + | ||
| 65 | +const styles = StyleSheet.create({ | ||
| 66 | + image: { | ||
| 67 | + width: 200, | ||
| 68 | + height: 200, | ||
| 69 | + margin: 20, | ||
| 70 | + borderWidth: 1 | ||
| 71 | + }, | ||
| 72 | +}); | ||
| @@ -0,0 +1,72 @@ | |||
| 1 | +import React from "react"; | ||
| 2 | +import { StyleSheet, View, ScrollView, Button } from "react-native"; | ||
| 3 | +import FastImage, { | ||
| 4 | + ResizeMode, | ||
| 5 | + OnLoadEvent, | ||
| 6 | + OnProgressEvent, | ||
| 7 | + Priority | ||
| 8 | +} from "react-native-fast-image"; | ||
| 9 | + | ||
| 10 | +export const FastImageExampleLow = () => { | ||
| 11 | + return ( | ||
| 12 | + <ScrollView> | ||
| 13 | + <View style={{gap: 5}}> | ||
| 14 | + <FastImage | ||
| 15 | + style={styles.image} | ||
| 16 | + source={{ | ||
| 17 | + priority: "low", | ||
| 18 | + cache: "web", | ||
| 19 | + uri: "https://res8.vmallres.com/pimages/uomcdn/CN/pms/202205/gbom/6941487259298/428_428_D7BFF22D4678EB68440F914B352214C4mp_tds.png", | ||
| 20 | + headers: {Authorization: 'someAuthToken'} | ||
| 21 | + }} | ||
| 22 | + resizeMode={FastImage.resizeMode.contain} | ||
| 23 | + onLoadStart={() => { | ||
| 24 | + console.log("onLoadStart: success"); | ||
| 25 | + }} | ||
| 26 | + onProgress={(e: OnProgressEvent) => { | ||
| 27 | + console.log( | ||
| 28 | + "onProgress: success loaded=" + | ||
| 29 | + e.nativeEvent.loaded + | ||
| 30 | + " total=" + | ||
| 31 | + e.nativeEvent.total | ||
| 32 | + ); | ||
| 33 | + }} | ||
| 34 | + onLoad={(e: OnLoadEvent) => { | ||
| 35 | + console.log( | ||
| 36 | + "onLoad: success width=" + | ||
| 37 | + e.nativeEvent.width + | ||
| 38 | + " height=" + | ||
| 39 | + e.nativeEvent.height | ||
| 40 | + ); | ||
| 41 | + }} | ||
| 42 | + onError={() => { | ||
| 43 | + console.log("onError: success"); | ||
| 44 | + }} | ||
| 45 | + onLoadEnd={() => { | ||
| 46 | + console.log("onLoadEnd: success"); | ||
| 47 | + }} | ||
| 48 | + /> | ||
| 49 | + <Button title="preload" onPress={()=>{ | ||
| 50 | + const h = [{ | ||
| 51 | + priority: "high", | ||
| 52 | + cache: "web", | ||
| 53 | + uri: "https://res8.vmallres.com/pimages/uomcdn/CN/pms/202205/gbom/6941487259298/428_428_D7BFF22D4678EB68440F914B352214C4mp_tds.png", | ||
| 54 | + headers: {'Authorization': 'someAuthToken1'} | ||
| 55 | + }] | ||
| 56 | + FastImage.preload(h) | ||
| 57 | + }}></Button> | ||
| 58 | + <Button title="clearMemoryCache" onPress={FastImage.clearMemoryCache}></Button> | ||
| 59 | + <Button title="clearDiskCache" onPress={FastImage.clearDiskCache}></Button> | ||
| 60 | + </View> | ||
| 61 | + </ScrollView> | ||
| 62 | + ); | ||
| 63 | +}; | ||
| 64 | + | ||
| 65 | +const styles = StyleSheet.create({ | ||
| 66 | + image: { | ||
| 67 | + width: 200, | ||
| 68 | + height: 200, | ||
| 69 | + margin: 20, | ||
| 70 | + borderWidth: 1 | ||
| 71 | + }, | ||
| 72 | +}); | ||
| @@ -0,0 +1,72 @@ | |||
| 1 | +import React from "react"; | ||
| 2 | +import { StyleSheet, View, ScrollView, Button } from "react-native"; | ||
| 3 | +import FastImage, { | ||
| 4 | + ResizeMode, | ||
| 5 | + OnLoadEvent, | ||
| 6 | + OnProgressEvent, | ||
| 7 | + Priority | ||
| 8 | +} from "react-native-fast-image"; | ||
| 9 | + | ||
| 10 | +export const FastImageExampleNormal = () => { | ||
| 11 | + return ( | ||
| 12 | + <ScrollView> | ||
| 13 | + <View style={{gap: 5}}> | ||
| 14 | + <FastImage | ||
| 15 | + style={styles.image} | ||
| 16 | + source={{ | ||
| 17 | + priority: "normal", | ||
| 18 | + cache: "web", | ||
| 19 | + uri: "https://res8.vmallres.com/pimages/uomcdn/CN/pms/202205/gbom/6941487259298/428_428_D7BFF22D4678EB68440F914B352214C4mp_tds.png", | ||
| 20 | + headers: {Authorization: 'someAuthToken'} | ||
| 21 | + }} | ||
| 22 | + resizeMode={FastImage.resizeMode.contain} | ||
| 23 | + onLoadStart={() => { | ||
| 24 | + console.log("onLoadStart: success"); | ||
| 25 | + }} | ||
| 26 | + onProgress={(e: OnProgressEvent) => { | ||
| 27 | + console.log( | ||
| 28 | + "onProgress: success loaded=" + | ||
| 29 | + e.nativeEvent.loaded + | ||
| 30 | + " total=" + | ||
| 31 | + e.nativeEvent.total | ||
| 32 | + ); | ||
| 33 | + }} | ||
| 34 | + onLoad={(e: OnLoadEvent) => { | ||
| 35 | + console.log( | ||
| 36 | + "onLoad: success width=" + | ||
| 37 | + e.nativeEvent.width + | ||
| 38 | + " height=" + | ||
| 39 | + e.nativeEvent.height | ||
| 40 | + ); | ||
| 41 | + }} | ||
| 42 | + onError={() => { | ||
| 43 | + console.log("onError: success"); | ||
| 44 | + }} | ||
| 45 | + onLoadEnd={() => { | ||
| 46 | + console.log("onLoadEnd: success"); | ||
| 47 | + }} | ||
| 48 | + /> | ||
| 49 | + <Button title="preload" onPress={()=>{ | ||
| 50 | + const h = [{ | ||
| 51 | + priority: "high", | ||
| 52 | + cache: "web", | ||
| 53 | + uri: "https://res8.vmallres.com/pimages/uomcdn/CN/pms/202205/gbom/6941487259298/428_428_D7BFF22D4678EB68440F914B352214C4mp_tds.png", | ||
| 54 | + headers: {'Authorization': 'someAuthToken1'} | ||
| 55 | + }] | ||
| 56 | + FastImage.preload(h) | ||
| 57 | + }}></Button> | ||
| 58 | + <Button title="clearMemoryCache" onPress={FastImage.clearMemoryCache}></Button> | ||
| 59 | + <Button title="clearDiskCache" onPress={FastImage.clearDiskCache}></Button> | ||
| 60 | + </View> | ||
| 61 | + </ScrollView> | ||
| 62 | + ); | ||
| 63 | +}; | ||
| 64 | + | ||
| 65 | +const styles = StyleSheet.create({ | ||
| 66 | + image: { | ||
| 67 | + width: 200, | ||
| 68 | + height: 200, | ||
| 69 | + margin: 20, | ||
| 70 | + borderWidth: 1 | ||
| 71 | + }, | ||
| 72 | +}); | ||