使用滚动条。

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. 数据结构算法之冒泡排序——Java语言实现

    今天来谈下冒泡排序算法,这次实现由两种形式如下所示: 1.对于长度为N的数据序列,没有加标签限制,针对一开始就是有序的数据序列,仍然需要排序N-1趟来完成排序. 2.对于长度为N的数据序列,加标了签限 ...

  2. 和系统运行状况相关的Shell命令总结

    1.  Linux的实时监测命令(watch):    watch 是一个非常实用的命令,可以帮你实时监测一个命令的运行结果,省得一遍又一遍的手动运行.该命令最为常用的两个选项是-d和-n,其中-n表 ...

  3. Python *Mix_w6

    is 和 == 小数据池 python中有两个数据类型存在小数据池:数字int范围 -5 ~ 256 字符串中如果有特殊字符+ - * / @ 等等,他们的内存地址就可能不一样 字符串中单个*20以内 ...

  4. Django学习教程

    教程link:https://code.ziqiangxuetang.com/django/django-install.html 最好用虚拟环境学习django,用pycharm时要注意所选的pyt ...

  5. javascrit--常用互动方法

    本文是刚开始学习javascript的一些基础知识 JavaScript--互动 JavaScript输出内容 document.write("内容"+"<br&g ...

  6. Java EntityMapper

    package org.rx.util; import org.rx.common.Func2; import org.rx.common.Action2; import org.rx.common. ...

  7. 【转】Win32程序中调用ActiveX控件

    #include "stdafx.h" #include <iostream> #include <windows.h> #include <comd ...

  8. 关于itext生成pdf的新的demo(包含简单的提取txt文件的内容 和xml内容转化为pdf)

    一.用的iText版本为7.0.2版本,maven的配置如下: <dependencies> <!-- always needed --> <dependency> ...

  9. Van Emde Boas Tree

    van Emde Boas trees 支持所有优先级优先级队列的操作,并且巧妙的是它对于SEARCH, INSERT,DELETE,MINIMUM,MAXMUN,SUCCESSOR,和PREDECE ...

  10. ChIP-seq motif ROC 相关资料

    [怪毛匠子]独家整理 不可以转载 MEME工具 http://meme-suite.org DNA motif 搜索算法总结 http://www.bbioo.com/lifesciences/40- ...