React native 入门二魅力展示

最新推荐文章于 2025-09-02 00:04:34 发布

转载最新推荐文章于 2025-09-02 00:04:34 发布 · 234 阅读

本文介绍如何使用React Native创建一个可以加载并展示电影信息的应用。文章提供了完整的代码示例，并针对Android平台可能出现的红屏问题给出了解决方案。

打下面代码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目录中会多出几个文件, 即可解决这个问题