ScrollView组件

ScrollView

---

一 .基本功能

1.在 inde.ios.js 中

//ScrollView组件

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

//练习1:实现ScrollView 基本功能
var HelloReactNative = require("./myScrollView");


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

---

2. 新建另一个js 文件(myScrollView.js)

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


/*
    ScrollView 的简单实现
    实现监测拖拽,滑动的相关方法
    添加几个子组件
*/

var  MyScrollView = React.createClass({

    //监控事件
    _onScrollBeginDrag: function () {
        console.log("开始拖拽");
    },
    _onScrollEndDrag: function () {
        console.log("结束拖拽");
    },
    _onMomentumScrollBegin: function () {
        console.log("开始滑动");
    },
    _onMomentumScrollEnd: function () {
        console.log("结束滑动");
    },

    //刷新事件(要导入组件)
    _onRefresh: function () {
        console.log("刷新")
    },

    render:function () {
        return(
            <View style={styles.container}>
                {/*刷新 属于 ScrollView 的一个属性*/}
                <ScrollView
                    style={styles.scrollView}
                    showsVerticalScrollIndicator={true}
                    onScrollBeginDrag={this._onScrollBeginDrag}
                    onScorllEndDrag={this._onScrollEndDrag}
                    onMomentumScrollBegin={this._onMomentumScrollBegin}
                    onMomentumScrollEnd={this._onMomentumScrollEnd}
                    refreshControl={
                        <RefreshControl
                            refreshing={false}
                            tintColor="red"
                            title="正在刷新......"
                            onRefresh={this._onRefresh}
                            />
                    }
                    >
                    <View style={styles.view_1}></View>
                    <View style={styles.view_2}></View>
                    <View style={styles.view_3}></View>
                </ScrollView>
            </View>
        );
    }

});


var  styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:"cyan"
    },
    scrollView:{
        margin:25,
        backgroundColor:"#cccccc"
    },
    view_1:{
        margin:15,
        flex:1,
        height:300,
        backgroundColor:"yellow"
    },
    view_2:{
        margin:15,
        flex:1,
        height:300,
        backgroundColor:"blue"
    },
    view_3:{
        margin:15,
        flex:1,
        height:300,
        backgroundColor:"green"
    },
});




//导出模块
module.exports = MyScrollView;

二.电影模块

1.添加一个本地 JSON 数据文件( data.json )

json 的数据来源:
https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json

2. 创建一个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}}
                        >

                    </Image>
                    <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:18,
        marginTop:3,
        marginBottom:3,
        textAlign:"center"
    },
    year:{
        marginBottom:3,
        textAlign:"center"
    }
});

module.exports = MovieList;

3.在 index.ios.js文件中修改

//ScrollView组件

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

//练习1:实现ScrollView 基本功能
// var HelloReactNative = require("./myScrollView");

//练习2: 电影列表
var HelloReactNative = require("./movieList");

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

4.配置:

因为图片网址是 Http 的,所以要在 xcode 的 plist 文件中设置网络