-
React Native中的 ScrollView 的組件除了包裝滾動(dòng)平臺(tái),還集成了觸摸鎖定的 響應(yīng)者 系統(tǒng),使用的時(shí)候有幾點(diǎn)需要注意
-
ScrollView 必須有一個(gè)確定的高度才能正常工作,對(duì)于 ScrollView 來(lái)說(shuō),它就是將一些不確定高度的子組件裝進(jìn)確定高度的容器
-
初始化的2中方式
-
不要給 ScrollView 中不要加 [flex:1]
-
直接給該 ScrollView 設(shè)置高度(不建議),因?yàn)樗鼤?huì)根據(jù)內(nèi)部組件自動(dòng)延伸自己的尺寸到合適的大小
-
ScrollView 內(nèi)部的其它響應(yīng)者沒(méi)辦法阻止 ScrollView 本身成為響應(yīng)者(也就是說(shuō),ScrollView 響應(yīng)的優(yōu)先級(jí)比內(nèi)部組件高,且內(nèi)部組件沒(méi)辦法改變優(yōu)先級(jí))
-
那么就先來(lái)看看怎么創(chuàng)建基本的 ScrollView
var CustomScrollView = React.createClass({
render(){ return(
<ScrollView style={styles.mainStyle}>
{this.renderItem()}
</ScrollView>
);
},
renderItem() { var itemAry = []; var colorAry = ['gray', 'green', 'blue', 'yellow', 'black', 'orange']; for (var i = 0; i<colorAry.length; i++) {
itemAry.push(
<View key={i} style={[styles.itemStyle, {backgroundColor: colorAry[i]}]}></View>
);
}