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); 

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

转载于:https://www.cnblogs.com/dragonh/p/6210682.html

react native ScrollView相关推荐

  1. react native scrollView FlatList 多级联动

    思路就是 监听 onscroll方法 改变其他联动控件,下面是一个例子 import React, {Component} from 'react'; import {StyleSheet,Text, ...

  2. react native ScrollView实现滑动锚定,滑动到指定位置

    实现ScrollView滑动视图组件滑动到指定位置,实现tab与具体位置相锚定 给需要锚定的组件加上onLayout属性 //event.nativeEvent.layout.x是水平方向值,even ...

  3. React Native常用组件之ListView

    1. ListView常用属性 ScrollView 相关属性样式全部继承 dataSource ListViewDataSource 设置ListView的数据源 initialListSize n ...

  4. 【转】【React Native开发】

    [React Native开发]React Native控件之ListView组件讲解以及最齐全实例(19)  [React Native开发]React Native控件之Touchable*系列组 ...

  5. react native利用webvView嵌入h5页面以及RN与webView的通信

    前言:这边主要是记录下,在react native中如何使用h5页面,以及h5页面发生点击,或者跳转到react native时,如何与react native进行通信. 一.react native ...

  6. react native的单选按钮react-native-radio-master

    随着项目对react native的使用,碰到了很多RN的坑...只可惜我不是职业前端,让我一个php来做页面,是在是有些勉强了..这篇主要是实现RN的单选按钮,上传表单的时候使用的. github地 ...

  7. 大咖说:React Native 全埋点实现原理(内附赠书)

    本文主要介绍如何实现 React Native 的全埋点,主要是控件点击 $AppClick 事件.该内容,会默认你有一定的 React Native 开发经验,(若没有,也可参与文末赠书). ■ 作 ...

  8. 从web移动端布局到react native布局

    在web移动端通常会有这样的需求,实现上中下三栏布局(上下导航栏位置固定,中间部分内容超出可滚动),如下图所示: 实现方法如下: HTML结构: <div class='container'&g ...

  9. 【REACT NATIVE 系列教程之十三】利用LISTVIEW与TEXTINPUT制作聊天/对话框获取组件实例常用的两种方式...

    本站文章均为 李华明Himi 原创,转载务必在明显处注明:  转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2346.html ...

最新文章

  1. windows IIS权限经典设置教程
  2. Gulp 之图片压缩合并
  3. wxWidgets:wxDateSpan类用法
  4. 斯坦福python中文分词stanza
  5. 协方差 之 随机变量间的协方差及向量之间的协方差之间的微妙的区别
  6. mybatis连接oracle_Mybatis 系列 0:初恋Mybatis
  7. 数据库---JDBC
  8. 3-1:HTTP协议之应用层协议了解
  9. 国家铁路调度中心在哪_博慈46寸液晶拼接屏打造上海铁路局南翔站指挥中心显示系统...
  10. Android动态壁纸画布透明,Android 动态壁纸LayoutParams问题
  11. mysql可视化工具路径访问_windows开启3306端口并用可视化工具访问远程mysql(授权访问)...
  12. 程序员躲不掉的“中年危机”
  13. vim编辑器操作汇总
  14. linux驱动系列之挂载(转)
  15. Web前端程序员简历
  16. 调度指挥系统解决方案
  17. OpenDrive地图格式解析——案例分析
  18. 云智慧透视宝PHP应用性能监控实现原理
  19. Oracle DBA日常工作手册
  20. Addition Chains

热门文章

  1. android跳转到相册需要权限,Android打开相册获取图片路径
  2. 小程序监听android返回键,微信小程序左上角返回按钮触发事件
  3. Java Sokect编程之HTTP请求
  4. php成员属性的声明方式,PHP中如何定义类及其成员属性与操作_PHP教程
  5. 【java】visualvm 插件 visual gc 使用介绍
  6. 【kafka】Kafka中的动态配置源码分析
  7. 【clickhouse】clickhouse UTC 时间带有时区 如何写入
  8. 1.1.0-简介-P11-分布式锁的解决方案
  9. 【lucene】lucene 高级搜索
  10. Kafka : 报错 KafkaController NoSuchElementException : : key not found : [xxx]