React native 入门二魅力展示

最新推荐文章于 2025-07-02 09:34:15 发布

原创最新推荐文章于 2025-07-02 09:34:15 发布 · 430 阅读

0 ·

CC 4.0 BY-SA版权

React Native 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用React Native创建的电影应用程序实例。该应用通过fetch API获取电影数据，并使用ListView组件展示电影列表。文章还提供了针对Android平台遇到的“红屏问题”的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

打下面代码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);

然后分别真机运行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目录中会多出几个文件, 即可解决这个问题