1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
import React, { Component } from
'react'
;
import {
AppRegistry,
StyleSheet,
Image,
PixelRatio
} from
'react-native'
;
//.........
preciseImageStyle: {
width: actrualWidth / PixelRatio.get(),
height: actrualHeight / PixelRatio.get(),
}
//.........
|
1
2
3
4
5
|
dependencies {
compile
'com.facebook.fresco:animated-gif:0.11.0'
//需要GIF动画支持添加本行语句
compile
'com.facebook.fresco:webpsupport:0.11.0'
//需要WebP格式支持添加本行语句
compile
'com.facebook.fresco:animated-webp:0.11.0'
//需要WebP动画支持添加本行语句
}
|
1
2
3
4
5
6
7
8
|
let imageSource =
"http://www.hangge.com/blog/images/logo.png"
;
Image.getSize(imageSource).then((width, height) => {
//取得图片的宽高,并进行相应的处理
//......
}).
catch
((error) => {
//下载图片失败
console.log(error);
});
|
1
2
3
4
5
6
7
|
let imageSource =
"http://www.hangge.com/blog/images/logo.png"
;
Image.prefetch(imageSource).then((result) => {
//当预下载成功时,返回值result是true
}).
catch
((error) => {
//预下载图片失败
console.log(error);
});
|
1
2
3
|
uri:
'http://hangge.com/img.png'
,
cache:
'force-cache'
}} />
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
import React, {Component} from
'react'
;
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TouchableOpacity
} from
'react-native'
;
//网络图片数组
var
imgs = [
'https://img3.doubanio.com/view/movie_poster_cover/mpst/public/p2263582212.jpg'
,
'https://img3.doubanio.com/view/movie_poster_cover/mpst/public/p2265761240.jpg'
,
'https://img3.doubanio.com/view/movie_poster_cover/mpst/public/p2266110047.jpg'
];
//图片浏览组件
class MyImage extends Component {
//构造函数
constructor(props) {
super
(props);
this
.state = {
imgs: props.imgs,
count: 0
};
}
//下一张按钮点击事件
goNext() {
var
count =
this
.state.count;
count++;
if
(count < imgs.length) {
this
.setState({count: count});
}
}
//上一张按钮点击事件
goPreview() {
var
count =
this
.state.count;
count --;
if
(count >= 0){
this
.setState({count: count});
}
}
render() {
return
(
source={{uri:
this
.state.imgs[
this
.state.count]}}
resizeMode=
"contain"
/>
);
}
}
//默认应用的容器组件
class App extends Component {
render() {
return
(
);
}
}
//样式定义
const styles = StyleSheet.create({
flex:{
flex: 1,
alignItems:
'center'
},
image:{
borderWidth:1,
width:300,
height:200,
borderRadius:5,
borderColor:
'#ccc'
},
img:{
height:198,
width:300,
},
btns:{
flexDirection:
'row'
,
justifyContent:
'center'
,
marginTop:20
},
btn:{
width:60,
height:30,
borderColor:
'#0089FF'
,
borderWidth: 1,
justifyContent:
'center'
,
alignItems:
'center'
,
borderRadius:3,
marginRight:20,
},
});
AppRegistry.registerComponent(
'HelloWorld'
, () => App);
|
1
|
|
1
2
|
var
icon =
this
.props.active ? require(
'./image/active.png'
) : require(
'./image/inactive.png'
);
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
import React, { Component } from
'react'
;
import {
AppRegistry,
StyleSheet,
View,
Image,
} from
'react-native'
;
//导入 nativeImageSource函数
let nativeImageSource = require(
'nativeImageSource'
);
class Main extends Component {
render() {
let ades = {
android:
'mipmap/ic_launcher'
,
width: 72,
height: 72
};
return
(
);
}
}
const styles = StyleSheet.create({
container: {
//根View样式
flex: 1,
alignItems:
'center'
,
backgroundColor:
'gray'
},
image: {
backgroundColor:
'white'
,
width: 100,
height: 100,
},
});
AppRegistry.registerComponent(
'HelloWorld'
, () => Main);
|
1
2
3
4
5
|
let ades = {
iOS:
'ic_launcher'
,
width: 72,
height: 72
};
|