react native ScrollView

標籤：like   work   內容   code   scroll   多個   play   lis   應該   

ScrollView是一個通用的可滾動的容器，你可以在其中放入多個組件和視圖，而且這些組件並不需要是同類型的。ScrollView不僅可以垂直滾動，還能水平滾動（通過horizontal屬性來設定）。

import React, { Component } from ‘react‘;import{ AppRegistry, ScrollView, Image, Text, View } from ‘react-native‘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>    );  }}// 註冊應用(registerComponent)後才能正確渲染// 注意：只把應用作為一個整體註冊一次，而不是每個組件/模組都註冊AppRegistry.registerComponent(  ‘IScrolledDownAndWhatHappenedNextShockedMe‘,  () => IScrolledDownAndWhatHappenedNextShockedMe);

ScrollView適合用來顯示數量不多的滾動元素。放置在ScollView中的所有組件都會被渲染，哪怕有些組件因為內容太長被擠出了螢幕外。如果你需要顯示較長的滾動列表，那麼應該使用功能差不多但效能更好的ListView組件。下面我們來看看如何使用ListView。

react native ScrollView