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
118
119
120
121
122
|
'use strict'
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
View,
Text,
TouchableOpacity,
Navigator,
ScrollView,
ViewPager,
BackAndroid,
ViewPagerAndroid,
Image,
ListView,
} = React;
BackAndroid.addEventListener('hardwareBackPress', function() {
if(_navigator == null){
return false;
}
if(_navigator.getCurrentRoutes().length === 1){
return false;
}
_navigator.pop();
return true;
});
var _navigator ;
var PAGES = 5;
var imageUrls = [
'https://img.alicdn.com/bao/uploaded/i3/TB1vkdZKFXXXXaAXVXXXXXXXXXX_!!0-item_pic.jpg',
'https://img.alicdn.com/bao/uploaded/i5/TB1CGo3KXXXXXb6XpXXYXGcGpXX_M2.SS2',
'https://img.alicdn.com/bao/uploaded/i1/TB1jkifKVXXXXXhXXXXXXXXXXXX_!!0-item_pic.jpg',
'https://img.alicdn.com/bao/uploaded/i2/TB1GCgoKVXXXXcaXpXXXXXXXXXX_!!0-item_pic.jpg',
'https://img.alicdn.com/bao/uploaded/i1/TB1D6A7KVXXXXaQXVXXXXXXXXXX_!!0-item_pic.jpg',
]
var NewsView = React.createClass({
getInitialState: function(){
_navigator = this.props.navigator;
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
return {
dataSource: ds.cloneWithRows(this._getData()),
};
},
_getData:function(){
var datas = [];
fetch('https://news-at.zhihu.com/api/4/themes')
.then((response) => response.text())
.then((responseText) => {
var jsonObject = eval("(" + responseText + ")");
var array = jsonObject.others;
for(var i=0; i<array.length; i++ ){
datas.push(array[i]);
}
this.setState({
dataSource: this.state.dataSource.cloneWithRows(datas),
isLoading: false
});
})
.catch((error) => {
console.warn(error);
}).done;
return datas;
},
render:function(){
var pages = [];
for (var i = 0; i < PAGES; i++) {
pages.push(
<View key={i} style={{ flex: 1, alignItems: 'stretch' }} collapsable={false}>
<Image
style={{ flex:1 }}
source={{uri: imageUrls[i%PAGES] }}
/>
</View>
);
}
return (
<ScrollView>
<View>
<ViewPagerAndroid
style={styles.viewPager}
initialPage={0}
onPageScroll={this.onPageScroll}
onPageSelected={this.onPageSelected}
ref={viewPager => { this.viewPager = viewPager; }}>
{pages}
</ViewPagerAndroid>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) =>
<TouchableOpacity>
<View style={{ flexDirection:'row' }}>
<Image source={{ uri: rowData.thumbnail }} style={{height:60,width:80, margin:12,}} />
<View>
<Text style={{ marginTop:12, color:'#234', fontSize:16,}}>{rowData.name}</Text>
<Text style={{ marginTop:12, color:'#888', fontSize:12,}}>{rowData.description}</Text>
<View style={{height:1.5, backgroundColor:'#222' }}></View>
</View>
</View>
</TouchableOpacity>
}
/>
</View>
</ScrollView>
);
},
});
var styles = StyleSheet.create({
viewPager:{
height : 200,
},
});
module.exports = NewsView;
|
