美文网首页
如何使用ScrollView

如何使用ScrollView

作者: 冷洪林 | 来源:发表于2016-12-22 09:06 被阅读40次
    • 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

    相关文章

      网友评论

          本文标题:如何使用ScrollView

          本文链接:https://www.haomeiwen.com/subject/goucvttx.html