ScrollView是一個通用的滾動容器攻泼,可以托管多個組件和視圖揖赴⊙┪唬可滾動的項目不必是同質(zhì)的竭钝,你可以垂直和水平滾動(通過設(shè)置水平屬性)。
這個例子創(chuàng)建了一個垂直的ScrollView雹洗,圖像和文字混合在一起香罐。
import React, { Component } from 'react';
import { ScrollView, Image, Text } from 'react-native';
export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
render() {
return (
<ScrollView>
<Text style={{fontSize:96}}>Scroll me plz</Text>
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Text style={{fontSize:96}}>If you like</Text>
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Text style={{fontSize:96}}>Scrolling down</Text>
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Text style={{fontSize:96}}>What's the best</Text>
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Text style={{fontSize:96}}>Framework around?</Text>
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Text style={{fontSize:80}}>React Native</Text>
</ScrollView>
);
}
}
image.png
可以將ScrollViews配置為允許使用滑動手勢通過使用pagingEnabled道具來分頁瀏覽。在視圖之間水平滑動也可以使用ViewPagerAndroid組件在Android上實現(xiàn)时肿。
帶有單個項目的滾動視圖可用于允許用戶縮放內(nèi)容庇茫。設(shè)置maximumZoomScale和minimumZoomScale道具,您的用戶將能夠使用捏和展開手勢來放大和縮小螃成。