ScrollView

创建文档时间：2016.3.23-21:00
作者：三月懒驴
使用平台：Mac

简单例子

'use strict'

import React from 'react-native'
let {Component,StyleSheet,View,Text,ScrollView,TouchableOpacity} = React

class Scroll extends Component{
    //提供一个函数来生成Items 数组
    _renderItems(){
        let blockArr = []
        for (let i=0;i<5;i++){
            blockArr[i] = (
                <View style = {styles.item} key={i}><Text>项目{i}</Text></View>
            )
        }

        return blockArr;
    }
    render(){
        let items = this._renderItems();
        items[items.length] = (
            <ScrollView key={'10'} styles={styles.scrollView} horizontal={true}>
                {this._renderItems()}
            </ScrollView>
        )
        return(
            <ScrollView styles={styles.scrollView}>
                {items}
            </ScrollView>
        )
    }
}

const styles = {
    scrollView:{
        magrin:10,
    },
    item:{
        flex:1,
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:'#ccc',
        borderColor:'#999',
        borderWidth:1,
        padding:10,
        margin:10,
        height:50,
    },
}


export default Scroll

其实ScrollView没什么好说的，很简单的一个组件！但是又是实际用起来最难的。为什么呢？还是那个问题，优化！这里先不说优化，看看ScrollView的一些用法。
代码里面抛开其他东西我们可以看到，其实就是一个组件，里面包含一堆View。。。
这里面我们懒得一个个写，用一个_renderItems来生成一系列的View！注意，这个数组的组件View里面是要带有Key的！写过React-Js的小伙伴也应该清楚这一点。而_renderItems回来的数组最后，我们再追加一个元素，也是ScrollView，不过这次它就多了一个horizontal={true} 这个参数是让Item们横向发展的。

小结

部分基础和重要的组件基本说了，看到做出来的东西虽然不成样，但是离一个APP的距离又近了！下面的章节可能就没这些那么简单了，View的东西我们说了差不多6章节，要做一个简单的APP界面基本是可以的了！
但是呢，有一点我们还是要注意的。react里面组件和组件之间的独立性很强，嵌套也很多，那么我们的数据应该如何传递？官方提供了一个东西叫做Flux！但是我看了几次！！！很难懂啊！那是天书好不好！所以，我们选择学习redux！同样难懂！但是你会看得懂的东西。因此一下我们要跳到react-js里面学习redux!

不想学react-js的别急，我们在那边学好了，还是会回来native这边显摆着做一个demo的。