ScrollView
創(chuàng)建文檔時間：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{
//提供一個函數(shù)來生成Items 數(shù)組
_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沒什么好說的攒菠，很簡單的一個組件！但是又是實際用起來最難的摊腋。為什么呢？還是那個問題嘁傀，優(yōu)化兴蒸！這里先不說優(yōu)化，看看ScrollView的一些用法细办。
代碼里面拋開其他東西我們可以看到橙凳，其實就是一個組件，里面包含一堆View笑撞。痕惋。。
這里面我們懶得一個個寫娃殖，用一個_renderItems來生成一系列的View值戳！注意，這個數(shù)組的組件View里面是要帶有Key的炉爆！寫過React-Js的小伙伴也應(yīng)該清楚這一點堕虹。而_renderItems回來的數(shù)組最后，我們再追加一個元素芬首，也是ScrollView赴捞，不過這次它就多了一個horizontal={true} 這個參數(shù)是讓Item們橫向發(fā)展的。
小結(jié)
部分基礎(chǔ)和重要的組件基本說了郁稍，看到做出來的東西雖然不成樣赦政，但是離一個APP的距離又近了！下面的章節(jié)可能就沒這些那么簡單了耀怜，View的東西我們說了差不多6章節(jié)恢着，要做一個簡單的APP界面基本是可以的了！
但是呢财破，有一點我們還是要注意的掰派。react里面組件和組件之間的獨立性很強，嵌套也很多左痢，那么我們的數(shù)據(jù)應(yīng)該如何傳遞靡羡？官方提供了一個東西叫做Flux系洛！但是我看了幾次！Ｂ圆健描扯！很難懂啊趟薄！那是天書好不好荆烈！所以，我們選擇學(xué)習(xí)redux竟趾！同樣難懂！但是你會看得懂的東西宫峦。因此一下我們要跳到react-js里面學(xué)習(xí)redux!
不想學(xué)react-js的別急岔帽，我們在那邊學(xué)好了，還是會回來native這邊顯擺著做一個demo的导绷。
