如何使用ScrollView

  • 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(
        
          Scroll me plz
          
          
          
          
          
          If you like
          
          
          
          
          
          Scrolling down
          
          
          
          
          
          What's the best
          
          
          
          
          
          Framework around?
          
          
          
          
          
          React Native
        
    );
  }
}

// 注册应用(registerComponent)后才能正确渲染
// 注意:只把应用作为一个整体注册一次,而不是每个组件/模块都注册
AppRegistry.registerComponent('DTest', () => DTest);
  • ScrollView适合用来显示数量不多的滚动元素。放置在ScollView
    中的所有组件都会被渲染,哪怕有些组件因为内容太长被挤出了屏幕外。如果你需要显示较长的滚动列表,那么应该使用功能差不多但性能更好的ListView组件。下面我们来看看如何使用ListView。
    如何使用ScrollView_第1张图片

你可能感兴趣的:(如何使用ScrollView)