htmljs-ReactNative/ArticleView.js at master · czy520lw/htmljs-ReactNative · GitHub

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
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

var React = require('react-native');
var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ActivityIndicatorIOS,
    WebView,
    TouchableHighlight,
    Image
    } = React;

var ArticleView = React.createClass({
    render: function() {
        return (
            <View style={styles.container}>
                <View style={styles.statusbar}></View>

            <WebView
                     automaticallyAdjustContentInsets={false}
                     style={styles.webView}
                     url={this.state.url}
                     javaScriptEnabledAndroid={true}
                     startInLoadingState={true}
                >dddd</WebView>
                <View style={styles.footer}>
                    <TouchableHighlight onPress={this._back} underlayColor="#aaa">
                        <Image
                         style={styles.button}
                         source={require('image!back')}
                         resizeMode="cover"
                         />
                    </TouchableHighlight>
                </View>
                </View>
        );
    },

    getInitialState: function() {
        return {
            url:"http://www.html-js.com/article/"+this.props.article.id
        };
    },

    componentDidMount: function() {
        this.setStates({
            url:"http://www.html-js.com/article/"+this.props.article.id
        })
    },
    _back:function(){
        this.props.navigator.pop();
    }

});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',

    },
    statusbar:{
        backgroundColor:"#46afe4",
        height:20
    },
    header:{
        height:44,
        backgroundColor:"#46afe4",
        alignItems:"center",

    },
    footer:{
        height:44,
        backgroundColor:"#fff",
        flexDirection:"row",

        borderWidth:1,
        borderColor:"#fff",
        borderTopColor:"#ddd",
        //alignItems:"center",
    },
    back:{
        width:30,
        height:30,
    },
    button:{
        width:30,
        height:30,
        marginTop:5
    },
    title:{
        fontSize:16,
        lineHeight:30,
        color:"#fff"
    },
    webView: {
        flex: 1,
        backgroundColor: '#fff',

    },

});

AppRegistry.registerComponent('ArticleView', () => ArticleView);

module.exports = ArticleView;