react native ScrollView

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 54 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dragonh/p/6210682.html

文章标签：

#javascript #ViewUI

本文介绍了React Native中ScrollView组件的基本用法及其应用场景，并对比了ScrollView与ListView的差异，为开发者提供了选择合适滚动容器的建议。

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

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

class IScrolledDownAndWhatHappenedNextShockedMe 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( 'IScrolledDownAndWhatHappenedNextShockedMe', () => IScrolledDownAndWhatHappenedNextShockedMe);