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里面組件和組件之間的獨(dú)立性很強(qiáng)，嵌套也很多，那么我們的數(shù)據(jù)應(yīng)該如何傳遞？官方提供了一個東西叫做Flux！但是我看了幾次！！！很難懂啊！那是天書好不好！所以，我們選擇學(xué)習(xí)redux！同樣難懂！但是你會看得懂的東西。因此一下我們要跳到react-js里面學(xué)習(xí)redux!
不想學(xué)react-js的別急，我們在那邊學(xué)好了，還是會回來native這邊顯擺著做一個demo的。
