React-Native之最基础

最新推荐文章于 2024-11-26 02:00:29 发布

原创最新推荐文章于 2024-11-26 02:00:29 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

React Native学习记录专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用 React Native 中的 ScrollView 组件创建一个简单的电影列表应用。该应用通过数组存储电影数据，并展示了如何遍历这些数据以展示电影海报、标题及上映年份。

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

学习React-Native大概两周了吧,每天都是到处查找视频,练习Demo,学习效果还行.

要说一些简单的组件,怕是没什么难度,但我个人感觉在ReactNative中语法不是太难,毕竟,做过原生的开发,java水平还行,所以感觉在学习Reactnative的基础课程上,不是太吃力,但学习吗,总是一个过程,在这里呢,就是想记录一下,日后可以回顾一下.

这次记录一下,关于学习ScrollView时,练习的一个电影列表的Demo,但,此处并不是请求网络获取的条目数据,而是通过地址来请求获得的数据,在此处就是利用数组来进行数据的存储,下面就不多说了,看一下代码吧:

新建movieList.js:

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView,
    Image
} from 'react-native';

/*
* 数据源地址:
* https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json
* 返回的是Json格式的数据
* */

//从文件中读取数据,执行json.parse()方法,将json格式的字符串转化为json格式对象
var movieData = require("./data.json");

//获取所有movies数据,属性movies是一个数组
var movies = movieData.movies;

var MovieList = React.createClass({

    render:function(){
        //创建电影组件,根据movies中的元素个数,创建对应的组件
        //遍历数组,每当创建一个movie对象,就创建一个组件对象,样式一致,内容不一致

        //定义空数组,存储显示电影信息的组件
        var moviesRows=[];
        //遍历数组
        for(var i in movies){
            //获取movie对象
            var movie = movies[i];
            //创建组件,显示电影信息:图像(movie.posters.thumbnail),电影名称(movie.title),上映时间(movie.year).
            var row = (
                <View style={styles.row} key={i}>
                    <Image
                        style={styles.thumbnail}
                        source={{uri:movie.posters.thumbnail}}/>
                    <View style={styles.rightContainer}>
                        <Text style={styles.title}>{movie.title}</Text>
                        <Text style={styles.year}>{movie.year}</Text>
                    </View>
                </View>
            );
            //将创建的组件存储到数组中
            moviesRows.push(row);
        }

        return(
            <View style={styles.container}>
                <ScrollView style={styles.scrollView}>
                    {
                        //数组(所有子组件)
                        moviesRows
                    }
                </ScrollView>
            </View>

        );
    }

});

var styles = StyleSheet.create({
    container:{
        flex:1
    },
    scrollView:{
        flex:1,
        marginTop:25,
        backgroundColor:"#F5FCFF"
    },
    row: {
        flexDirection:"row",
        padding:5,
        alignItems:"center",
        backgroundColor:"#F5FCFF"
    },
    thumbnail:{
        width:53,
        height:81,
        backgroundColor:"gray"
    },
    rightContainer:{
        marginLeft:10,
        flex:1
    },
    title:{
        fontSize:8,
        marginTop:3,
        marginBottom:3,
        textAlign:"center"
    },
    year:{
        marginBottom:3,
        textAlign:"center"
    },
});

module.exports = MovieList;

然后在index.android.js文件中加载:

//ScrollView实现电影列表
var Hello = require("./movieList");

到此,代码就结束了,相当简单,放在这里就是一个参考作用

好了,有兴趣的可以参考一下.