rn 实现上下滑动选择列表_[RN] React Native 下实现底部标签（支持滑动切换）
上一篇文章
总结了不支持滑动切换的方法，此篇文章总结出 支持滑动 的方法
准备工作之类的，跟上文类似，大家可点击上文查看相关内容。
不同点在于 /src/App.js 下
主要使用 react-navigation 下的 createMaterialTopTabNavigator
所以也需要先安装 react-navigation
1)依赖版本如下：
"react-navigation": "^3.9.1",
2)代码如下：
import React from 'react';
import {Image} from 'react-native';
import {createAppContainer, createMaterialTopTabNavigator} from 'react-navigation';
//展示的页面
import Home from './Home';
import Contact from './Contact';
import Discover from './Discover';
import Mine from './Mine';
//Tab
const TabNavigator = createMaterialTopTabNavigator({
Home: {
screen: Home,//当前选项卡加载的页面
navigationOptions: {
tabBarLabel: '新闻',
tabBarIcon: ({tintColor, focused}) => (
source={focused ? require('./main_tab_home_icon_pressed.png') : require('./main_tab_home_icon.png')}
style={[{height: , width: }]}
/>
),
},
},
Contact: {
screen: Contact,
navigationOptions: {
tabBarLabel: '视频',
tabBarIcon: ({tintColor, focused}) => (
source={focused ? require('./main_tab_video_icon_pressed.png') : require('./main_tab_video_icon.png')}
style={[{height: , width: }]}
/>
),
},
},
Discover: {
screen: Discover,
navigationOptions: {
tabBarLabel: '图片',
tabBarIcon: ({tintColor, focused}) => (
source={focused ? require('./main_tab_image_icon_pressed.png') : require('./main_tab_image_icon.png')}
style={[{height: , width: }]}/>
),
}
},
Mine: {
screen: Mine,
navigationOptions: {
tabBarLabel: '我的',
tabBarIcon: ({tintColor, focused}) => (
source={focused ? require('./main_tab_user_icon_pressed.png') : require('./main_tab_user_icon.png')}
style={[{height: , width: }]}/>
),
}
},
}, {
swipeEnabled: true,
animationEnabled: true,
tabBarPosition: "bottom", //如果在顶部，就是 top
tabBarOptions: {
activeTintColor: '#45C018',
inactiveTintColor: '#111111',
showIcon: true, // 是否显示图标, 默认为false
showLabel: true, // 是否显示label
labelStyle: {
fontSize: ,
},
style: {
backgroundColor: '#fff',
borderTopWidth: 0.5,
borderTopColor: 'grey',
},
indicatorStyle: {
height: , // 不显示indicator
},
},
});
export default createAppContainer(TabNavigator);
二、如果要将将标签放在顶部，只需要修改 abBarPosition 的值为 top，就可以实现Android下对应TabLayout 顶部效果
abBarPosition: "top", //如果在顶部，就是 top
三、更多可参考官网文档
转载请注明出处！谢谢~~
[RN] React Native 下实现底部标签(不支持滑动切换)
底部标签是现在App的基本菜单实现 下面分别用 createBottomTabNavigator 和 createMaterialBottomTabNavigator 两种方法分别实现底部菜单 但此两 ...
[RN] React Native 图片保存到相册(支持 Android 和 ios)
React Native 图片保存到相册(支持 Android 和 ios) 原理: IOS用 RN自带的 CameraRoll, Android 使用 不成功,需要 react-native-fs ...
[RN] React Native 下拉放大动画
React Native 下拉放大动画 经测试,无法运行 https://www.jianshu.com/p/1c960ad75020
[RN] React Native 实现 多选标签
React Native 实现 多选标签 效果如下: 实现代码: import React, {Component} from 'react'; import {Button, StyleSheet, ...
[RN] React Native 下列表 FlatList 和 SectionList
1.FlatList FlatList组件用于显示一个垂直的滚动列表,其中的元素之间结构近似而仅数据不同. FlatList更适于长列表数据,且元素个数可以增删.和ScrollView不同的是,Fla ...
[RN] React Native 常见基本问题归纳总结
[RN] React Native 常见基本问题归纳总结 本问题总结涉及到版本为: "react": "16.8.3","react-native& ...
[RN] React Native 幻灯片效果 Banner
[RN] React Native 幻灯片效果 Banner 1.定义Banner import React, {Component} from 'react'; import {Image, Scr ...
[RN] React Native 实现 类似QQ 登陆页面
[RN] React Native 实现 类似QQ 登陆页面 一.主页index.js 项目目录下index.js /** * @format */ import {AppRegistry} from ...
[RN] React Native 实现图片预览
[RN] React Native 实现图片预览 效果预览: 代码如下: 'use strict'; import React, {Component} from 'react'; import {I ...
随机推荐
SQL Tune Report–sqltrpt.sql
ORACLE 10g提供了一个脚本sqltrpt.sql用来查询最耗费资源的SQL语句,其输出的结果分为两部分: 15 Most expensive SQL in the cursor cache 1 ...
C# 调用一个按钮的Click事件(利用反射)
最基本的调用方法 (1)button1.PerformClick();(2)button1_Click(null,null);(3)button_Click(null,new EventArgs()) ...
java类初始化优先级
父类静态变量.父类静态代码块.子类静态变量.子类静态代码块.父类非静态变量.父类非静态代码块.父类构造函数.子类非静态变量.子类非静态代码块.子类构造函数
NSDictionary 、 NSMutableDictionary
1 重构学生与学校的练习 1.1 问题 本案例要求用字典解决下述问题.问题是:有一个学校,该学校有两个学院,每个学院中又有两个班级,而在每个班级中有两名学生. 现在作如下要求: 1)显示所有学生的信息 ...
SVN 主干(trunk)、分支(branch )、标记(tag)
主干(trunk).分支(branch ).标记(tag) 在SVN中Branch/tag在一个功能选项中,在使用中也往往产生混淆. 在实现上,branch和tag,对于svn都是使用copy实现的, ...
Java中的main()方法详解
在Java中,main()方法是Java应用程序的入口方法,也就是说,程序在运行的时候,第一个执行的方法就是main()方法,这个方法和其他的方法有很大的不同,比如方法的名字必须是main,方法必须是 ...
【转】C/C++求模求余运算符——2013-08-20
http://blog.csdn.net/whealker/article/details/6203629 求模运算符(%),或称求余运算符,也就是数学上所谓的除法中的余数,%两侧均应为整数, |小| ...
有趣的游戏：Google XSS Game
Google最近出了一XSS游戏: https://xss-game.appspot.com/ 我这个菜鸟看提示,花了两三个小时才全过了.. 这个游戏的规则是仅仅要在攻击网页上弹出alert窗体就能够 ...
Android项目---ActivityGroup的使用
ActivityGroup在一年前已经被说明不用了,但是腾讯QQ,新浪微博上也不乏ActivityGroup的身影.所以,即使是过时的东西,也有学习的必要,当然项目中也是可以添加的.在网上找了一个博客 ...
十六、springcloud(二)Eureka集群
1.创建子工程spring-cloud-peer(jar) 2.创建application-peer1.properties,application-peer2.properties applicat ...