RN_ScrollView

模块1：myScrollView

实现ScrollowView的基本功能

index.ios.js

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

myScrollView:头文件

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

myScrollView:组件

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

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:样式

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",});

导出

module.exports = MyScrollView;

模块2：

电影列表

index.ios.js

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

movieList.js:头文件

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)

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

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:样式

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,});

导出

module.exports = MovieList;

RN官网 原文链接：https://www.f2er.com/react/303357.html