RN_ScrollView

模块1：myScrollView

实现ScrollowView的基本功能

index.ios.js

@H_404_8@var RN_ScrollView = require("./movieList");

myScrollView:头文件

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

myScrollView:组件

ScrollowView 的简单实现 检测拖拽以及还拽的相关方法 并且添加几个子组件
ScrollowView必须有固定高度，可以给父设置

@H_404_8@var MyScrollView = React.createClass({ _onScrollBeginDrag:function () { console.log("start drag 001"); },_onScrollEndDrag:function () { console.log("end drag 002 "); },_onMomentumScrollBegin:function () { console.log("start move 003"); },_onMomentumScrollEnd:function () { console.log("end move 004"); },_onRefresh:function () { console.log("刷新。。。"); },render:function () { return( <View style = {styles.container}> <ScrollView style = { styles.scrollowView} showsVerticalScrollIndicator = {true} onScrollBeginDrag = {this._onScrollBeginDrag} onScrollEndDrag = {this._onScrollEndDrag} onMomentumScrollBegin = {this._onMomentumScrollBegin} onMomentumScrollEnd = {this._onMomentumScrollEnd} refreshControl = { <RefreshControl refreshing = {false} tintColor = "gray" title = "正在刷新..." onRefresh = {this._onRefresh} /> } > <View style = {styles.view_1}></View> <View style = {styles.view_2}></View> <View style = {styles.view_3}></View> </ScrollView> </View> ); },});

myScrollView:样式

@H_404_8@var styles = StyleSheet.create({ container:{ flex:1,backgroundColor:"cyan",},scrollowView:{ marginTop:25,backgroundColor:"#CCCCCC",view_1:{ margin:15,flex:1,height:300,backgroundColor:"yellow",view_2:{ margin:15,backgroundColor:"red",view_3:{ margin:15,backgroundColor:"black",});

导出

@H_404_8@module.exports = MyScrollView;

模块2：

电影列表

index.ios.js

@H_404_8@ar RN_ScrollView = require("./movieList");

movieList.js:头文件

@H_404_8@import React,Image,} from 'react-native';

movieList.js:组件

/*数据源 才用本地数据 JSON数据 网址址https://raw.githubusercontent...
http://old.qqe2.com/
数组（所有子组件）
从文件中读取数据 require 默认执行了JSON.parse()将JSON格式的字符串转化为json格式对象
var movieData = require("./data.json");
获取moives的数据。属性movies是个数组
var movies = movieData.movies;
创建电影列表组件，根据movies中元素的个数，创建对应的组件
遍历数组，每当获取一个move对象，就创建一个组件对象，样式一样，显示内容不一样
定义空数组，存储显示电影信息 的组件
遍历数组 获取movie对象
创建组件 显示电影的信息
图像（movie.posters.thumbnail）
电影名称(movie.title)
上映时间(movie.year)

将创建的组件存到数组中
*/

@H_404_8@var movieData = require("./data.json"); var movies = movieData.movies; var MovieList = React.createClass({ render :function () { var moviesRows = []; for(var i in movies){ var movie = movies[i]; var row = ( <View key = {i} style = {styles.row}> <Image source = {{uri:movie.posters.thumbnail}} style ={styles.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> ); },});

movieList.js:样式

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

导出

@H_404_8@module.exports = MovieList;

---

RN官网