基础篇_使用ScrollView

ScrollView
是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动，还能水平滚动（通过 horizontal [hɒrɪ'zɒnt(ə)l] 水平的 属性来设置）。

下面的示例代码创建了一个垂直滚动的ScrollView
，其中还混杂了图片和文字组件。
注：下面的这个 ./img/favicon.png
并不实际存在，请自己准备图片素材，并改为相对应的正确路径，具体请参考图片文档。

[rɪ'kwaɪə] 需要

import React, { Component } from 'react';
import {
    AppRegistry,
    ScrollView,
    Image,
    Text,
    View } from 'react-native';

class MyApp extends Component {
    render() {
        return(
               <ScrollView>
               <Text style={{fontSize:96}}>Scroll me plz</Text>
               <Image source={require('/Users/admin/MyApp/img/5.png')} />
               <Image source={require('/Users/admin/MyApp/img/1.png')} />
               <Image source={require('/Users/admin/MyApp/img/2.png')} />
               <Image source={require('/Users/admin/MyApp/img/3.png')} />
               <Image source={require('/Users/admin/MyApp/img/4.png')} />
               <Text style={{fontSize:96}}>If you like</Text>
               <Image source={require('./img/favicon.png')} /> //img 是文件夹 直接放在项目的目录下，favicon 是图片名
               <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('MyApp', () => MyApp);

ScrollView适合用来显示数量不多的滚动元素。放置在ScollView中的所有组件都会被渲染，哪怕有些组件因为内容太长被挤出了屏幕外。如果你需要显示较长的滚动列表，那么应该使用功能差不多但性能更好的ListView组件。