-
ScrollView
是一個通用的可滾動的容器,你可以在其中放入多個組件和視圖,而且這些組件并不需要是同類型的。ScrollView不僅可以垂直滾動,還能水平滾動(通過horizontal={true}屬性來設置)。
- 下面的示例代碼創建了一個垂直滾動的ScrollView,其中還混雜了圖片和文字組件。
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
Image,
ScrollView
} from 'react-native';
export default class DTest 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>
);
}
}
// 注冊應用(registerComponent)后才能正確渲染
// 注意:只把應用作為一個整體注冊一次,而不是每個組件/模塊都注冊
AppRegistry.registerComponent('DTest', () => DTest);
- ScrollView適合用來顯示數量不多的滾動元素。放置在ScollView
中的所有組件都會被渲染,哪怕有些組件因為內容太長被擠出了屏幕外。如果你需要顯示較長的滾動列表,那么應該使用功能差不多但性能更好的ListView組件。下面我們來看看如何使用ListView。
最后編輯于 :
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。