已开启
react-native-fast-image 接入 imageknife C化 demo #576
react-native-fast-image 接入 imageknife C化 demo #576
已开启
libo729创建于 1月4日
4 个文件变更+222-0
M25P3/rn-tester/examples/react-native-fast-image/FastImageDemo.tsx+6-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+});