RN_ScrollView

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,
      flex:1,
      height:300,
      backgroundColor:"red",
    },
    view_3:{
      margin:15,
      flex:1,
      height:300,
      backgroundColor:"black",
    },
});

导出

 module.exports = MyScrollView;

模块2：

电影列表

index.ios.js

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

movieList.js:头文件

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ScrollView,
  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",
     backgroundColor:"#F5FCFF",
   },
   thumbnail:{
     width:53,
     height:81,
     backgroundColor:"red",
   },
   rightContainer:{
     marginLeft:10,
     flex:1,
   },
   title:{
     fontSize:18,
     marginTop:3,
     marginBottom:3,
     textAlign:"center",
   },
   year:{
     marginBottom:3,
     textAlign:"center",
   },
});

导出

module.exports = MovieList;

---

RN官网?（ES6）

我自己把UI等修改了下，算是回顾之前的把
ScrollView 必须设置高度。通过View的flex设置。子控件不用设置布局类型，alignItem和justifyContment。这一块还是么理解透彻

导出格式

导出格式ES5

// 在ES5里面，要导出一个类别的模块用，一般通过module.exports来导出。
var React = require('react');
var MyComponents = React.createClass({
   render: function() {
    return (<div>1111</div>)
   }
});
module.exports = MyComponents;

// 引用如下：
var c1 = require('./MyComponents')

ES6导出 格式

// 在ES6里面 通过export default来导出类
// es6
export default class MyComponent extends Component {
  render() {
  }
}
// 引用如下：
import MyComponent from './MyComponent';

stCrollView.js 组件

用 export default class xxx extends Component

//           {/* <Image source = {require("picName")}/> */}
export default class  stScrollView extends Component {
  render (){
    return (
      <View style = {styles.container}>
      <ScrollView style = {styles.scrollViewStyle}>
          <Image
            style = {styles.imageStyle}
            source = {{uri:"http://pic.58pic.com/58pic/14/13/65/91u58PICh8S_1024.jpg"}}/>
        <Text style = {styles.textStyle}>显示2种资源照片</Text>
      </ScrollView>
      </View>
    );
  }
};

stCrollView.js 样式

const 修饰 ，ES5是 var

const styles = StyleSheet.create({
  container:{
    flex:1,
  },
  scrollViewStyle:{
    backgroundColor:"green",
  },
  imageStyle:{
    height:300,
    backgroundColor:"gray",
  },
  textStyle:{
    height:100,
    textAlign:"center",
    backgroundColor:"blue",
    color:"red",
    fontSize:16,
  },
});