React Native(四)——顶部以及底部导航栏实现方式
效果图:
一步一步慢慢来:
其实刚入手做app的时候,就应该做出简单的顶部以及底部导航栏。无奈又在忙其他事情,导致这些现在才整理出来。
1.顶部导航栏:react-native-scrollable-tab-view;文档地址:https://github.com/skv-headless/react-native-scrollable-tab-view
2.底部导航栏:react-navigation中的TabNavigator;文档地址:https://reactnavigation.org/docs/navigators/tab
3.一直想让index.android.js的代码简洁一些,苦思不得其解,直到现在才找到了一点“路径”,看这版的源代码:
index.android.js:
/*** Sample React Native App* https://github.com/facebook/react-native* @flow*/import React, { Component } from 'react'; import {AppRegistry,StyleSheet,Text,View,Image } from 'react-native';//顶部导航栏 import TopTabBar from './Views/TopTabBar'; //底部导航栏 import BottomTabBar from './Views/BottomTabBar';export default class ywg extends Component {render() {return (<View style={{flex:1}}><TopTabBar/><BottomTabBar/></View> );} }AppRegistry.registerComponent('ywg', () => ywg);
怎样?够简单吧……对了,这样的代码看起来才比较“优雅”(容忍zheng小叶正儿八经的胡说八道哦~)而主要的代码就在
//顶部导航栏 import TopTabBar from './Views/TopTabBar'; //底部导航栏 import BottomTabBar from './Views/BottomTabBar';
这两个红色的文件中。
【重点注意】将两个Component同时使用的时候,一定要在最外层的View上定义样式,否则任你怎样摆弄,它们总是不会展现“庐山真面目”,具体的文档在:http://reactnative.cn/docs/0.46/layout-props.html
这是项目文件路径。
BottomTabBar.js:
/*** Sample React Native App* https://github.com/facebook/react-native* @flow*/import React, { Component } from 'react'; import {AppRegistry,StyleSheet,Text,View,Image } from 'react-native';//底部导航栏 import { TabNavigator } from "react-navigation";class Home extends React.Component {static navigationOptions = {tabBarLabel: '热点',tabBarIcon: ({ focused, tintColor }) => (<Imagesource={focused ? require('../Images/hot_hover.png') : require('../Images/hot.png')}style={{ width: 26, height: 26, tintColor: tintColor }}/> )};render() {return (<View style={styles.container}><Text>这是热点</Text></View> );} } class Circle extends React.Component {static navigationOptions = {tabBarLabel: '圈子',tabBarIcon: ({ focused, tintColor }) => (<Imagesource={focused ? require('../Images/coterie_hover.png') : require('../Images/coterie.png')}style={{ width: 26, height: 26, tintColor: tintColor }}/> )};render() {return (<View style={styles.container}><Text>这是圈子内容</Text></View> );} } class Tools extends React.Component {static navigationOptions = {tabBarLabel: '工具',tabBarIcon: ({ focused, tintColor }) => (<Imagesource={focused ? require('../Images/tool.png') : require('../Images/tool.png')}style={{ width: 26, height: 26, tintColor: tintColor }}/> )};render() {return (<View style={styles.container}><Text>这是工具内容</Text></View> );} } class Mypage extends React.Component {static navigationOptions = {tabBarLabel: '我的',tabBarIcon: ({ focused, tintColor }) => (<Imagesource={focused ? require('../Images/my_hover.png') : require('../Images/my.png')}style={{ width: 26, height: 26, tintColor: tintColor }}/> )};render() {return (<View style={styles.container}><Text>这是我的内容</Text></View> );} }const BottomTabBar = TabNavigator({Home: {screen: Home,},Circle: {screen: Circle,},Tools: {screen: Tools,},Mypage: {screen: Mypage,},},{tabBarOptions: {activeTintColor: '#4BC1D2',inactiveTintColor: '#000',showIcon: true,showLabel: true,upperCaseLabel: false,pressColor: '#823453',pressOpacity: 0.8,style: {backgroundColor: '#fff',paddingBottom: 0,borderTopWidth: 0.5,borderTopColor: '#ccc',},labelStyle: {fontSize: 12,margin: 1},indicatorStyle: { height: 0 }, //android 中TabBar下面会显示一条线,高度设为 0 后就不显示线了 },tabBarPosition: 'bottom',swipeEnabled: false,animationEnabled: false,lazy: true,backBehavior: 'none',});const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#fff',} });module.exports = BottomTabBar;
TopTabBar.js:
/*** Sample React Native App* https://github.com/facebook/react-native* @flow*/import React, { Component } from 'react'; import {AppRegistry,StyleSheet,Text,View,Image } from 'react-native'; import HomePage from '../Views/HomePage'; import PricePage from '../Views/PricePage'; import InventoryPage from '../Views/InventoryPage';//顶部导航 var ScrollableTabView = require('react-native-scrollable-tab-view');export default class TopTabBar extends Component {render() {return (<ScrollableTabView tabBarUnderlineStyle={{backgroundColor:'#fff'}}><HomePage tabLabel="首页" /><PricePage tabLabel="成交价" /><InventoryPage tabLabel="库存" /></ScrollableTabView> );} } module.exports = TopTabBar;
而关于这些的详细介绍可以参考这里(老大的小结):http://www.cnblogs.com/vipstone/p/7516115.html?utm_source=tuicool&utm_medium=referral;
美中不足:
怎样才能实现顶部栏、底部栏控制各自部分功能呢?留下来的~~~
PS:尴尬的事情猝不及防的发生了……
一直想不明白,顶部导航栏跟底部导航栏同时存在的情况下,怎样控制各自的功能呢?于是再请教完做手机开发的同事后才恍然大悟,原来自己想的顶部导航栏根本不是顶部导航栏,简言之就是自己把布局搞错了!明明只是有底部导航栏,而所谓的“顶部导航栏”也只是底部导航栏中的第一小部分里面嵌套着一个轮播组件,才会给人以错觉,啊啊啊……事实真相居然是这样的~
转载于:https://www.cnblogs.com/zhengyeye/p/7606442.html
React Native(四)——顶部以及底部导航栏实现方式相关推荐
- react native Android 键盘将底部导航栏/按钮顶起
比如,当输入框中输入信息时,键盘会把底部导航栏顶起,就会很丑啊! 解决办法: 1.找到文件 android/app/src/main/AndroidManifest.xml,修改android:win ...
- (AS笔记)Android全透明沉浸式主题样式——顶部状态栏+底部导航栏
目录 1.前言 2.自定义主题theme 3.全透明沉浸式主题theme 4.设置状态栏颜色(Android 5.0+) 5.设置状态栏半透明 6.设置状态栏全透明 7.设置底部导航栏半透明 8.全透 ...
- 【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )
文章目录 一.BottomNavigationBar 组件 二.BottomNavigationBarItem 组件 三.BottomNavigationBar 底部导航栏代码示例 四.BottomN ...
- 底部导航栏的几种实现方式
概述 Android底部导航栏实现方式真的是太多了~在这里仅介绍几种实现方式~建议使用TabLayout +ViewPager ,TabLayout是Android Material Design中的 ...
- RN新手上路-----底部导航栏图标设置
RN增加底部导航栏图标(新手上路) 刚接触react navigation,想实现一个底部导航栏,发现只有title,没有图标,这哪成呀?? 要实现它,首先就要先用那个react-navigation ...
- (AS笔记)Android全透明沉浸式主题样式——全屏沉浸隐藏底部导航栏
上一章介绍了,Android全透明沉浸式主题样式--顶部状态栏+底部导航栏,教程传送门链接: (AS笔记)Android全透明沉浸式主题样式--顶部状态栏+底部导航栏 ...
- 利用FrameLayout+LinearLayout实现Android底部导航栏切换
实现底部导航栏的方式有很多种,此处我只是采用了其中一种,其余的方法可自行百度去查询. 效果图展示 一.布局文件内容 <?xml version="1.0" encoding= ...
- android fragment 底部菜单栏,一句话搞定Android底部导航栏,一键绑定Fragment、ViewPager...
现在大多数App都会用到底部导航栏,比如常见的聊天工具QQ.微信.购物App等等,有了底部导航栏,用户可以随时切换界面,查看不同的内容.它的实现方式也很多,以前大多使用TabHost来实现,但是现在我 ...
- 最简单靠谱的底部导航栏实现!!!
前言 Android实现底部导航栏的方式很多,有5种实现方式. 作者使用过两种:RadioGroup+Fragment:FragmentTabHost:其中第一种更容易上手. 实现效果 目录 创建Ra ...
最新文章
- 轻轻一扫,立刻扣款,付款码背后的原理你不想知道吗?
- notepad php格式,notepad怎么格式xml
- BZOJ 1070 拆点 费用流
- 常见开源分布式存储系统
- 使用java实现持续移动的小球
- vue项目实践教程1:vux项目搭建和简介
- 基于FPGA实现的高速串行交换模块实现方法研究
- 为什么我只写微头条,粉丝一天就增加700多人?
- 我的“技术架构”之旅
- POJ 3862 POJ 3528 HDU 3662 HDU 4273 三维凸包问题解决模板
- 详解Android常用抓包工具的使用方法、技巧-学习笔记20220416
- cad怎么画立体图形教学_CAD怎么画三维图形? cad绘制立体的室内装修图的教程
- tensorflow gpu环境安装
- 互联网公司裁员还有秘密?我知道了!
- 微带线特性阻抗计算公式_HFSS 计算 微带线 特征阻抗
- Dear小弟×××,给你们的一封信「社区运营入门系列 序」
- 1U,2U,3U,4U机箱面板,U的含义
- 复杂网络 社交网络_社交网络:不是主流
- ValueError: The list of inputs passed to the model is redundant. All inputs should only appear once.
- Reog Ponorogo是爪哇族人在印尼的一个部落的传统舞蹈
热门文章
- 千万数据去重_如何在 1 秒内做到大数据精准去重?
- 手机修图软件测试,照片秒变高清修图软件APP
- python beautifulsoup_Python爬虫利器:Beautiful Soup的使用(一)
- define macro in xcode project
- centos选择php7 作为默认版本_树莓派下安装Nginx+Php7.3 搭建Web服务器
- opc 多点位一次性读_如何使用Excel通过OPC访问WinCC的实时数据
- 计算机视觉基础-图像处理 Task06 边缘检测
- featuretools,可自动构造机器学习特征的Python库
- Feign来调用服务
- Android网络编程5之OkHttp2.x用法全解析