react-native之ScrollView

效果图：



1、放置在ScollView中的所有组件都会被渲染，哪怕有些组件因为内容太长被挤出了屏幕外。ScrollView适合用来显示数量不多的滚动元素。

2、把组件嵌套在ScrollView里面即可。

'use strict';
import React,{Component} from 'react';
import {AppRegistry,ScrollView,Text,Image} from 'react-native';
class IScrolledDownAndWhatHappenedNextShockedMe extends Component{

render(){
return(
<ScrollView>
<Text style={{fontSize: 96}}>Scroll me plz</Text>
<Image source={require('./img/lanbojini.jpg')}/>
<Image source={require('./img/lanbojini.jpg')}/>
<Image source={require('./img/lanbojini.jpg')}/>
<Image source={require('./img/lanbojini.jpg')}/>
<Image source={require('./img/lanbojini.jpg')}/>
<Text style={{fontSize: 96}}>Scroll me plz</Text>
<Image source={require('./img/lanbojini.jpg')}/>
<Image source={require('./img/lanbojini.jpg')}/>
<Image source={require('./img/lanbojini.jpg')}/>
<Image source={require('./img/lanbojini.jpg')}/>
<Image source={require('./img/lanbojini.jpg')}/>
<Text style={{fontSize: 96}}>Scroll me plz</Text>
<Image source={require('./img/lanbojini.jpg')}/>
<Image source={require('./img/lanbojini.jpg')}/>
<Image source={require('./img/lanbojini.jpg')}/>
<Image source={require('./img/lanbojini.jpg')}/>
<Image source={require('./img/lanbojini.jpg')}/>
<Text style={{fontSize: 96}}>Scroll me plz</Text>
<Image source={require('./img/lanbojini.jpg')}/>
<Image source={require('./img/lanbojini.jpg')}/>
<Image source={require('./img/lanbojini.jpg')}/>
<Image source={require('./img/lanbojini.jpg')}/>
<Image source={require('./img/lanbojini.jpg')}/>
</ScrollView>
);
}
}
//MyFirstProject 必须初始化的项目名字
AppRegistry.registerComponent('MyFirstProject',() => IScrolledDownAndWhatHappenedNextShockedMe );
如果你需要显示较长的滚动列表，那么应该使用功能差不多但性能更好的ListView组件