react-native-tab-view 导航栏切换插件讲解
首先引入插件
yarn add react-native-tab-view
如果用的原生环境要安装另外几个插件
yarn add react-native-reanimated react-native-gesture-handler
如果用的expo要安装
expo install react-native-gesture-handler react-native-reanimated
安装一个即可
如果你用的6.1以上的版本就直接安装完了
接着直接在app.js copy如下代码
import * as React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view'; const FirstRoute = () => (
<View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
); const SecondRoute = () => (
<View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
); const initialLayout = { width: Dimensions.get('window').width }; export default function TabViewExample() {
const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
]); const renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
}); return (
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
/>
);
} const styles = StyleSheet.create({
scene: {
flex: 1,
},
});
直接就能显示出tabbar的效果了
贴出官方git链接
https://github.com/react-native-community/react-native-tab-view
react-native-tab-view 导航栏切换插件讲解的更多相关文章
- 极致精简的fragment实现导航栏切换demo
一个小demo.用button+fragment实现导航栏切换界面,适合刚接触的新手看一下. 效果图 点击第二个后 源码: 主界面 <span style="font-size:18p ...
- Flutter - TabBar导航栏切换后,状态丢失
上一篇讲到了 Flutter - BottomNavigationBar底部导航栏切换后,状态丢失 里面提到了TabBar,这儿专门再写一下吧,具体怎么操作,来不让TabBar的状态丢失.毕竟大家99 ...
- React Native 之 View使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- mui底部导航栏切换分页
使用Hbuilder的mui框架开发移动端非常便利.高效: 底部导航栏切换功能也是移动APP开发中必须实现的: 引入mui文件.下面会用到jquery,同时引进 <link href=" ...
- Flutter - BottomNavigationBar底部导航栏切换后,状态丢失
如果你用过BottomNavigationBar.TabBar.还有Drawer,你就会发现,在切换页面之后,原来的页面状态就会丢失. 要是上一页有一个数据列表,很多数据,你滚动到了下头,切换页面后, ...
- Flutter实战视频-移动电商-04.底部导航栏切换效果
04.底部导航栏切换效果 博客地址: https://jspang.com/post/FlutterShop.html#toc-291 我们要做的效果图: 新建四个页面 home_page.dart ...
- React Native 系列(八) -- 导航
前言 本系列是基于React Native版本号0.44.3写的.我们都知道,一个App不可能只有一个不变的界面,而是通过多个界面间的跳转来呈现不同的内容.那么这篇文章将介绍RN中的导航. 导航 什么 ...
- React Native学习(五)—— 使用插件react-native-scrollable-tab-view
本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...
- 模仿虎牙App 导航栏切换
昨天看虎牙直播,发现导航栏挺有意思,自己也做个玩玩 <view class="tab_list row"> <view class="tab_item ...
随机推荐
- php hash算法实现memcached分布式
一.概述Memcached和mysql一样,是一款客户端/服务器端(C/S)系统管理软件,有IP.端口,一旦启动,服务器就一直处于可用状态.Mysql是通过SQL语句管理“磁盘中”的文件,Memcac ...
- Timer(阿里CTF)
下载文件之后发现是.apk类型文件,于是百度搜索了一下推荐再电脑上安装安卓模拟器,都尝试了一下逍遥安卓是真的不好用,小白觉得还是BlueStacks好用一些,下载之后去安装打开就看到了, 什么都没有发 ...
- Typescript 实战 --- (9)ES6与CommonJS的模块系统
1.ES6模块系统 1-1.export 导出 (1).单独导出 // a.ts export let a = 1; (2).批量导出 // a.ts let b = 2; let c = 3; ex ...
- 拓扑排序--P2881 [USACO07MAR]排名的牛Ranking the Cows
*传送 FJ想按照奶牛产奶的能力给她们排序.现在已知有N头奶牛(1 ≤ N ≤ 1,000).FJ通过比较,已经知道了M(1 ≤ M ≤ 10,000)对相对关系.每一对关系表示为“X Y”,意指X的 ...
- mysql 视图入门
- Python 日志模块详解
前言 我们知道查看日志是开发人员日常获取信息.排查异常.发现问题的最好途径,日志记录中通常会标记有异常产生的原因.发生时间.具体错误行数等信息,这极大的节省了我们的排查时间,无形中提高了编码效率.所以 ...
- 使用linux将一个服务器上的文件或者文件夹复制黏贴到另一个服务器上
一.复制文件: (1)将本地文件拷贝到远程 scp 文件名 用户名@计算机IP或者计算机名称:远程路径 本地192.168.1.8客户端 scp /root/install.* root@10.12 ...
- 吴裕雄--天生自然java开发常用类库学习笔记:对象克隆技术
class Person implements Cloneable{ // 实现Cloneable接口表示可以被克隆 private String name ; public Person(Strin ...
- Spring入门之三-------SpringIoC之Scopes
一.singleton和prototype public class Bean1 { public Bean1() { System.out.println(this.getClass().getSi ...
- HDU - 1698 Just a Hook (线段树---区间修改)
题意:n个棍子,初始值全为1,给定Q个区间,分别赋值,问n个棍子的总值. 分析:lazy标记主要体现在update上. 当l <= L && R <= r时,该结点的子结点 ...