React native 入门二 魅力展示

打下面代码copy至index.os.js 和index.android.js

import React, {    Component,} from 'react';import {    AppRegistry,    Image,    ListView,    StyleSheet,    Text,    View,} from 'react-native';var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';class AwesomeProject extends Component{    constructor(props) {        super(props);        this.state = {        dataSource: new ListView.DataSource({                                            rowHasChanged: (row1, row2) => row1 !== row2,                                            }),        loaded: false,        };    }    componentDidMount(){        this.fetchData();    }    fetchData() {        fetch(REQUEST_URL)        .then((response) => response.json())        .then((responseData) => {              this.setState({                            dataSource: this.state.dataSource.cloneWithRows(responseData.movies),                            loaded: true,                            });              })        .done();    }    render() {        if (!this.state.loaded) {            return this.renderLoadingView();        }        return (                <ListView                dataSource={this.state.dataSource}                renderRow={this.renderMovie}                style={styles.listView}                />                );    }    renderLoadingView()    {        return (<View style={styles.container} >                <Text>Loading movies......</Text>                </View>                );    }    renderMovie(movie) {        return (                <View style={styles.container}>                <Image                source={{uri: movie.posters.thumbnail}}                style={styles.thumbnail}                />                <View style={styles.rightContainer}>                <Text style={styles.title}>{movie.title}</Text>                <Text style={styles.year}>{movie.year}</Text>                </View>                </View>                );    }};var styles = StyleSheet.create({                               container: {                               flex: 1,                               flexDirection: 'row',                               justifyContent: 'center',                               alignItems: 'center',                               backgroundColor: '#F5FCFF',                               },                               rightContainer: {                               flex: 1,                               },                               title: {                               fontSize: 20,                               marginBottom: 8,                               textAlign: 'center',                               },                               year: {                               textAlign: 'center',                               },                               thumbnail: {                               width: 53,                               height: 81,                               },                               listView: {                               paddingTop: 20,                               backgroundColor: '#F5FCFF',                               },                               });AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
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

然后分别真机运行android和iOS项目即可

如果正常就可以看到运行结果

android可能遇见的问题 
红屏问题”Could not get BatchedBridge, make sure your bundle is packaged correctly” 
解决方法: 主要就只遇到这一个问题, 更改ip和port没有解决了, 后来在package.json中的”scripts”中添加”bundle-android”:”react-native bundle –platform android –dev false –entry-file index.android.js –bundle-output android/app/src/main/assets/index.android.bundle –sourcemap-output android/app/src/main/assets/index.android.map –assets-dest android/app/src/main/res/”, 
如果没有assets目录,手动添加下,不过运行时没有效果, 
在cmd中手动执行下, assets目录中会多出几个文件, 即可解决这个问题