/
NewsDetailScreen.js
115 lines (108 loc) · 2.29 KB
/
NewsDetailScreen.js
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
'use strict';
var React = require('react-native');
var {
AppRegistry,
PixelRatio,
StyleSheet,
Text,
View,
Image,
ToolbarAndroid,
TouchableHighlight,
} = React;
var MyWebView = require('./WebView');
var precomputeStyle = require('precomputeStyle');
var DetailToolbar = require('./DetailToolbar');
var REF_HEADER = 'header';
var PIXELRATIO = PixelRatio.get();
var NewsDetailScreen = React.createClass({
getInitialState: function() {
return({
isLoading: false,
detail: null,
scrollY: 0,
url: null,
});
},
componentDidMount: function() {
this.fetchStroyDetail();
},
fetchStroyDetail: function() {
this.setState({
isLoading: true,
detail: null,
url: this.props.news.url,
});
},
onWebViewScroll: function(event) {
//console.log('ScrollY: ' + event);
//var scrollY = -event / PIXELRATIO;
//var nativeProps = precomputeStyle({transform: [{translateY: scrollY}]});
//this.refs[REF_HEADER].setNativeProps(nativeProps);
},
render: function() {
var toolbar = <DetailToolbar navigator={this.props.navigator} style={styles.toolbar}
news={this.props.news}/>;
return (
<View {...this.props}>
<View style={styles.container}>
<MyWebView
url={this.state.url}
style={styles.content}
onScrollChange={this.onWebViewScroll}/>
{toolbar}
</View>
</View>
);
},
});
var styles = StyleSheet.create({
toolbar: {
backgroundColor: '#000000',
height: 56,
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
top: 0,
},
headerImage: {
height: 200,
flexDirection: 'row',
backgroundColor: '#DDDDDD',
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
top: 56,
},
titleContainer: {
flex: 1,
alignSelf: 'flex-end',
padding: 10,
backgroundColor: 'rgba(0,0,0,0.3)',
},
title: {
flex: 1,
fontSize: 18,
fontWeight: '500',
color: 'white',
},
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
center: {
justifyContent: 'center',
alignItems: 'center',
},
content: {
flex: 1,
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
top:56,
},
});
module.exports = NewsDetailScreen;