Using a ScrollView - RN4
使用滚动条。
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:
Using a ScrollView - RN4的更多相关文章
- ScrollView嵌套ListView,GridView数据加载不全问题的解决
我们大家都知道ListView,GridView加载数据项,如果数据项过多时,就会显示滚动条.ScrollView组件里面只能包含一个组件,当ScrollView里面嵌套listView,GridVi ...
- Android ScrollView监听滑动到顶部和底部的两种方式(你可能不知道的细节)
Android ScrollView监听滑动到顶部和底部,虽然网上很多资料都有说,但是不全,而且有些细节没说清楚 使用场景: 1. 做一些复杂动画的时候,需要动态判断当前的ScrollView是否滚动 ...
- React-Native学习系列(二) Image和ScrollView
接下来,我们接着(一)继续讲,今天我们学习的是Image组件和ScrollView组件. Image组件 Image:一个用于显示多种不同类型图片的React组件.那么要如何使用呢? 引入本地图片: ...
- iOS学习笔记——滚动视图(scrollView)
滚动视图:在根视图中添加UIScrollViewDelegate协议,声明一些对象属性 @interface BoViewController : UIViewController<UIScro ...
- 实现下来ScrollView放大轮播图
创建工程,创建一个UIScrollView属性,并遵循其协议: #define kWidth self.view.frame.size.width//屏幕宽 #define kHeight self. ...
- React Native之 ScrollView介绍和使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- ScrollView分栏视图分析
代码精华部分如下: //1.添加scrollView /* 1). 添加一个scrollView; 2).创建关注.热门.附近三个控制器. 3). 存储它们的名字到数组中,遍历并放到本控制器里. 4) ...
- IOS实现自动循环滚动广告--ScrollView的优化和封装
一.问题分析 在许多App中,我们都会见到循环滚动的视图,比如广告,其实想实现这个功能并不难,用ScrollView就可以轻松完成,但是在制作的过程中还存在几个小问题,如果能够正确的处理好这些小问题, ...
- ReactNative 根据scrollView/listview滑动距离动态修改NavBar颜色
我们常见某些APP上滑的时候,NavBar颜色会从透明渐变为某种颜色 原理非常简单,根据scrollView的回调动态修改NavBar的透明度即可. 在RN中,尤其是ListView中这个回调不是很好 ...
随机推荐
- 使用Stickers拓展集成iMessage简单功能
添加一个target,选择Stickers拓展: 然后就会出现iMessage的文件夹:添加你需要的iMessage图片,这里图片遵循下面的要求: Small: 100 x 100 pt @3x sc ...
- jq demo 点击弹窗,居中,可滚动,可拖动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Android : Android Studio 更新至gradle 4.10.1后Variants API变化
同步警告: WARNING: API 'variantOutput.getPackageApplication()' is obsolete and has been replaced with 'v ...
- inventory file 与hosts patterns (ansible 机器清单 与 主机匹配模式)
Ansible配置: ansible有两个核心配置文件: ansible.cfg 配置文件和Inventory配置文件 Ansible.cfg配置文件 Inventory机器列表配置 这里介绍Inve ...
- 2017年3月30日15:00:19 fq以后的以后 动态代理
代理与继承,组合不同的是,继承是继承父类特性,组合是拼装组合类的特性,代理是使用代理类的指定方法并可以做自定义. 静态类是应用单个类,当代理的类数量较多时可用动态代理,动态代理在概念上很好理解 htt ...
- winform rar压缩包解压缩
/// <summary> /// 解压缩 /// </summary> /// <param name="path& ...
- css的性质
css两个性质: 1.继承性 2.层叠行(选择器的一种选择能力,谁的权重大就选谁) A.选不中,走继承性,(font系列.color.text系列)权重是0 a)有多个父级都设置了这样的样式 走就 ...
- selenium+grid做分布式测试
一.grid介绍 1.本文用的是selenium-server-standalone-3.8.1.jar 2.Firefox用的55版本和对应的驱动 二.grid使用流程说明比如有个A机器,作用是hu ...
- httpd does not appear to be running and proxying cobbler, or SELinux is in the way.
当我们执行cobbler check时,出现这种错误:httpd does not appear to be running and proxying cobbler, or SELinux is i ...
- 【转载】 Pytorch 细节记录
原文地址: https://www.cnblogs.com/king-lps/p/8570021.html ---------------------------------------------- ...