博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
react-native-scrollable-tab-view 实现 TabBar
阅读量:6403 次
发布时间:2019-06-23

本文共 3720 字,大约阅读时间需要 12 分钟。

1.创建组件

src/components/CustomTabBar/index.js

/** * 自定义选项卡 */import React, {Component} from 'react';import {  Platform,  StyleSheet,  StatusBar,  View,  TouchableOpacity,  Image,  Text,} from 'react-native';//第三方插件import PropTypes from 'prop-types';//自定义组件import Common from '../../common'; //公共类// 图片资源import { images } from '../../res';const tabIcons = [  images.tabbar_home_selected,  images.tabbar_home_normal,  images.tabbar_shopcar_selected,  images.tabbar_shopcar_normal,  images.tabbar_mine_selected,  images.tabbar_mine_normal]; export default class CustomTabBar extends Component {  constructor(props) {    super(props);  }  static setAnimationValue({value}) {    console.log(value);  }  componentDidMount() {    // Animated.Value监听范围 [0, tab数量-1]    this.props.scrollValue.addListener(CustomTabBar.setAnimationValue);  }  renderTabOption(tab, i) {    let color = this.props.activeTab === i ? "#ED5100" : "#999999"; // 判断i是否是当前选中的tab,设置不同的颜色    let tabName = this.props.tabNames[i];    return (      
this.props.goToPage(i)} style={[styles.tab]} key={'tab' + i}>
{tabName}
); } renderTabs() { if (true !== this.props.placeMiddle || 0 !== this.props.tabs.length%2) { return this.props.tabs.map((tab, i) => this.renderTabOption(tab, i)); } else { let tabs = []; for (let i = 0; i < this.props.tabs.length; i++) { let tab = this.props.tabs[i]; if (i === parseInt(this.props.tabs.length/2)) { let middle = (
); tabs.push(middle); } tabs.push(this.renderTabOption(tab, i)); } return tabs; } } render() { let tabBarHeight = Platform.select({ ios: Common.isIphoneX ? 68 : 49, android: 49, }); return (
{this.renderTabs()}
); }} CustomTabBar.propTypes = { goToPage: PropTypes.func, // 跳转到对应tab的方法 activeTab: PropTypes.number, // 当前被选中的tab下标 tabs: PropTypes.array, // 所有tabs集合 tabNames: PropTypes.array, // 保存Tab名称 tabIconNames: PropTypes.array, // 保存Tab图标}; const styles = StyleSheet.create({ tabs: { flexDirection: 'row', backgroundColor:'#ffffff', borderTopWidth: 0.5, borderTopColor: '#cdcdcd', }, tab: { flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', }, tabBox: { flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: 48, height: 48, }, tabMiddleBox: { flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: 48, height: 48, }, tabBoxIcon: { width: 22, height: 22, }, tabBoxName: { fontSize: 10, marginTop: 3, },});

2.页面调用

src/pages/MainPage/index.js

/** * 主页面 */import React, {Component} from 'react';import {  BackHandler, // 物理返回键  View,  ToastAndroid,  Image,  StyleSheet} from 'react-native';import ScrollableTabView from 'react-native-scrollable-tab-view';// 自定义选项卡import { CustomTabBar } from '../../components';// 首页import HomePage from './HomePage';// 购物车import ShopCarPage from './ShopCarPage';// 我的import MinePage from './MinePage';export default class MainPage extends Component {  render() {    let tabNames = ['首页', '购物车', '我的'];    return (      
} tabBarPosition='bottom' >
); }}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', }, tabIcon:{ width:23, height:23, }});

3.效果图

转载于:https://www.cnblogs.com/crazycode2/p/9546471.html

你可能感兴趣的文章
为button设置回车事件
查看>>
阿里云李静远:阿里云大数据计算平台和ET大脑群的科研工程实践
查看>>
Java集合之HashMap源码解析
查看>>
ASP.NET Core 路由 - ASP.NET Core 基础教程 - 简单教程,简单编程
查看>>
如何新建VPP插件
查看>>
WPF4.0用tablet实现手写输入(更新XP SP3下也能手写输入方法)
查看>>
家居建材电商发展势头劲猛,如何抓住电商最后的机遇?
查看>>
【C#/WPF】ListView的MVVM例子,及禁止拖动ListView的头部Header
查看>>
PostgreSQL 10.1 手册_部分 II. SQL 语言_第 12 章 全文搜索_12.3. 空值文本搜索
查看>>
Rancher及Docker快速上手指南(二)
查看>>
centos7 hadoop 单机模式安装配置
查看>>
SQL Server死锁诊断--同一行数据在不同索引操作下引起的死锁
查看>>
hive查询报错:java.io.IOException:org.apache.parquet.io.ParquetDecodingException
查看>>
Navicat连接阿里云(centos7.3)的MySQL数据库遇到的问题及解决方法
查看>>
半年已过
查看>>
java反序列化漏洞入门分析
查看>>
程序员常用开发工具配置,给自己留一手!
查看>>
Ajax
查看>>
Java 内存模型-锁的内存语义
查看>>
Kubernetes日志采集Sidecar模式介绍
查看>>