使用滚动条。

1. import

import {ScrollView} from "react-native";

2. Using

      <ScrollView>
...
</ScrollView>

3. src

import React from 'react';
import { StyleSheet, Text, View, Image, ScrollView } from 'react-native'; export default class App extends React.Component {
render() {
return (
<ScrollView>
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}}
style={{width: , height: }}/>
<Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}}
style={{width: , height: }}/>
<Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}}
style={{width: , height: }}/>
<Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}}
style={{width: , height: }}/>
<Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}}
style={{width: , height: }}/>
<Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}}
style={{width: , height: }}/>
<Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}}
style={{width: , height: }}/>
<Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}}
style={{width: , height: }}/>
</View>
</ScrollView>
);
}
} const styles = StyleSheet.create({
container: {
flex: ,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Reference:

1. Using a ScrollView

Using a ScrollView - RN4的更多相关文章

  1. ScrollView嵌套ListView,GridView数据加载不全问题的解决

    我们大家都知道ListView,GridView加载数据项,如果数据项过多时,就会显示滚动条.ScrollView组件里面只能包含一个组件,当ScrollView里面嵌套listView,GridVi ...

  2. Android ScrollView监听滑动到顶部和底部的两种方式(你可能不知道的细节)

    Android ScrollView监听滑动到顶部和底部,虽然网上很多资料都有说,但是不全,而且有些细节没说清楚 使用场景: 1. 做一些复杂动画的时候,需要动态判断当前的ScrollView是否滚动 ...

  3. React-Native学习系列(二) Image和ScrollView

    接下来,我们接着(一)继续讲,今天我们学习的是Image组件和ScrollView组件. Image组件 Image:一个用于显示多种不同类型图片的React组件.那么要如何使用呢? 引入本地图片: ...

  4. iOS学习笔记——滚动视图(scrollView)

    滚动视图:在根视图中添加UIScrollViewDelegate协议,声明一些对象属性 @interface BoViewController : UIViewController<UIScro ...

  5. 实现下来ScrollView放大轮播图

    创建工程,创建一个UIScrollView属性,并遵循其协议: #define kWidth self.view.frame.size.width//屏幕宽 #define kHeight self. ...

  6. React Native之 ScrollView介绍和使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  7. ScrollView分栏视图分析

    代码精华部分如下: //1.添加scrollView /* 1). 添加一个scrollView; 2).创建关注.热门.附近三个控制器. 3). 存储它们的名字到数组中,遍历并放到本控制器里. 4) ...

  8. IOS实现自动循环滚动广告--ScrollView的优化和封装

    一.问题分析 在许多App中,我们都会见到循环滚动的视图,比如广告,其实想实现这个功能并不难,用ScrollView就可以轻松完成,但是在制作的过程中还存在几个小问题,如果能够正确的处理好这些小问题, ...

  9. ReactNative 根据scrollView/listview滑动距离动态修改NavBar颜色

    我们常见某些APP上滑的时候,NavBar颜色会从透明渐变为某种颜色 原理非常简单,根据scrollView的回调动态修改NavBar的透明度即可. 在RN中,尤其是ListView中这个回调不是很好 ...

随机推荐

  1. python的出生

    1.语言的种类 机器语言------>汇编语言------>高级语言 高级语言按转换方式分为两类: 解释类:执行方式类似于我们日常生活中的“同声翻译”,应用程序源代码一边由相应语言的解释器 ...

  2. 合并分支,从dev到master

    我在本地创建了dev分支,项目也push到远程的dev分支,今天在远程分支进行合并时,将dev合并到master,结果公司的gitlab始终不响应,我不知道是公司的网络不行还是我操作错误,就只能另想办 ...

  3. 2、AngularJs 过滤器($filter)

    1.内置过滤器: currency ({{123|currency}}) date (medium\short\fullDate\longDate\mediumDate\shortDate\mediu ...

  4. Android开发 ---代码创建选项菜单、隐藏菜单项、菜单的生命周期,菜单按钮图标设置、搜索框、xml中设置子菜单

    1.activity_main.xml 描述: 定义了一个按钮 <?xml version="1.0" encoding="utf-8"?> < ...

  5. dom4j操作xml的demo

    package com.cn.shop.util; import java.io.File;import java.io.FileOutputStream;import java.io.OutputS ...

  6. 运维grep语法

    grep的语法和用法 grep命令的格式: grep   [options]   PATTERN  [FILE] 其中:1,pattern是用正则表达式书写的模式.2,FILE是要查找的文件,可以是用 ...

  7. CSS 实现单、多行文本溢出显示省略号(…)

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...

  8. I/O简介

    用户空间是常规进程所在区域.JVM就是常规进程,驻守于用户空间.用户空间是非特权区域,在该区域执行的代码不能直接访问硬件设备. 内核空间是操作系统所在区域.内核代码有特别的权利:它能与设备控制器通讯, ...

  9. 内存泄露java.lang.OutOfMemoryError: PermGen space解决方法

    PermGen space的全称是Permanent Generation space,是指内存的永久保存区域,这块内存主要是被JVM存放Class和Meta信息的,Class在被Loader时就会被 ...

  10. Jacobi-Anger expansion

    [转载请注明出处]http://www.cnblogs.com/mashiqi 2017/06/16 适合于自己的关于Jacobi-Anger expansion的推导方法,这里记下来,方便以后查阅. ...