ScrollView是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动，还能水平滚动（通过horizontal属性来设置）。
class TestScrollView extends Component{ render(){ return ( <ScrollView> <Text style={{fontSize:20}}>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:20}}>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:20}}>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:20}}>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:20}}>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:20}}>React Native</Text> </ScrollView> ); } } AppRegistry.registerComponent('LotsOfGreetings',()=>TestScrollView);
文件路径：
设置横向滚动：
class TestScrollView extends Component{ render(){ return ( <ScrollView horizontal={true}> <Text style={{fontSize:20}}>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:20}}>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:20}}>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:20}}>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:20}}>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:20}}>React Native</Text> </ScrollView> ); } } AppRegistry.registerComponent('LotsOfGreetings',()=>TestScrollView);