react-native 实现带icon的底部导航栏
2020-05-06 16:10
731 查看
react-native 实现带icon的底部导航栏
一:需要的依赖包
yarn add react-navigation react-navigation-tabs react-navigation-stack react-native-gesture-handler react-native-gesture-handler react-native-reanimated react-native-vector-icons --save
如果有安装失败的依赖包,就一个一个的安装。我在这边遇到一个react-native-vector-icons总是安装失败的问题,解决方法是把yarn add react-native -g后,再次安装就没问题了。
二:写页面
import { createStackNavigator } from 'react-navigation-stack'; import { createAppContainer, createSwitchNavigator } from 'react-navigation'; import { createBottomTabNavigator } from 'react-navigation-tabs'; import React, { Component } from 'react'; import { Platform, View, Text } from 'react-native'; // console.disableYellowBox = true; // 关闭全部黄色警告 import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; class Page1 extends React.Component { render() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Home1!</Text> </View> ); } } class Page2 extends React.Component { render() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: ' 2088 center' }}> <Text>Home2!</Text> </View> ); } } class Page3 extends React.Component { render() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Home3!</Text> </View> ); } } class Page4 extends React.Component { render() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Home4!</Text> </View> ); } } export const BottomTab = createAppContainer( createBottomTabNavigator( { /*Page1路由*/ Page1: { /*Page1页面*/ screen: Page1, /*屏幕导航选项,可以定制导航器显示屏幕的方式(头部标题,选项卡标签等)*/ navigationOptions: { /*导航标签名*/ tabBarLabel: '页1', /*导航呈现的图标*/ tabBarIcon: ({ tintColor, focused }) => ( /*第三方图标库(图标名称,图标大小,图标样式*/ <MaterialIcons name={'home'} size={26} style={{ color: tintColor }} /> ), tabBarOnPress: (event) => { event.defaultHandler();//调用组建内默认的实现方法 console.log('点击了某个tabBatBtn' + event); }, }, }, Page2: { screen: Page2, navigationOptions: { tabBarLabel: '页2', tabBarIcon: ({ tintColor, focused }) => ( <MaterialIcons name={'location-on'} size={26} style={{ color: tintColor }} /> ), tabBarOnPress: (event) => { event.defaultHandler();//调用组建内默认的实现方法 console.log('点击了某个tabBatBtn' + event); }, }, }, Page3: { screen: Page3, navigationOptions: { tabBarLabel: '页3', tabBarOnPress: (event) => { event.defaultHandler();//调用组建内默认的实现方法 console.log('点击了某个tabBatBtn' + event); }, }, }, Page4: { screen: Page4, navigationOptions: { tabBarLabel: '页4', tabBarIcon: ({ tintColor, focused }) => ( <MaterialIcons name={'perm-identity'} size={26} style={{ color: tintColor }} /> ), tabBarOnPress: (event) => { event.defaultHandler();//调用组建内默认的实现方法 console.log('点击了某个tabBatBtn' + event); }, }, }, }, { tabBarOptions: { /*设置活动选项卡标签的颜色*/ activeTintColor: Platform.OS === 'ios' ? '#06C1AE' : '#06C1AE', // activeBackgroundColor: 'red',//活动选项卡的背景颜色。 // inactiveTintColor: 'yellow',//非活动选项卡的标签和图标颜色。 // inactiveBackgroundColor: 'pink',//非活动选项卡的背景颜色。 // showLabel: true,//是否为标签显示标签,默认为true。 showIcon: false,//是否显示选项卡的图标,默认为true。显示icon的话,labelStyle的的行高就要删掉 // style: {},//标签栏的样式对象。 labelStyle: {//选项卡标签的样式对象。 fontSize: 16, lineHeight: 46 // style和tabStyle都找不到垂直居中的属性,只能设置行高。 }, tabStyle: {},//选项卡的样式对象。 // allowFontScaling: true,//标签字体是否应缩放以符合“文本大小”辅助功能设置,默认为true。 // //覆盖forceInset道具 < SafeAreaView >。 // // 默认为{bottom:'always', top:'never'}。可用键top | bottom | left | right随值提供'always' | 'never'。 safeAreaInset: { bottom: 'never', top: 'always' }, }, }, ), ); const AppRouter = createStackNavigator({ Home: { screen: BottomTab, navigationOptions: { header: null, //可以通过将header设为null来禁用StackNavigator的Navigation }, }, }); export const AppCreateNavigator = createAppContainer( createSwitchNavigator( { AppRouter: AppRouter, }, { initialRouteName: 'AppRouter', }, ), ); export default class app extends React.Component { render() { return ( <AppCreateNavigator /> ) } }
注意点:1、设置icon时,labelStyle不要设置行高。没有图标并且想要文字垂直居中的话,要设置labelStyle的行高。
具体的配置见这里:React Navigation
相关文章推荐
- React Native(简单精致的底部导航栏):使用react-native-tab-navigator实现底部导航栏
- react-native底部导航栏实现--react-navigation-tabs填坑记录
- React-Native-顶部导航栏实现
- ReactNative学习实例(八) 第三方组件TabNavigator底部导航栏
- 模仿手机QQ底部导航栏Icon拖拽效果
- 使用Bottom Navigation Activity实现Android底部导航栏
- 安卓APP底部导航栏(有消息圆点指示器),实现fragment切换(eclipse)
- React Native多图层View,实现empty,content,error,loading等界面无缝跳转
- React-native 实现表情商城 表情长按拖动预览(还原安卓微信效果)
- Android App底部导航栏的另一种实现方式
- React Native中使用FlatList组件实现上拉刷新、下拉加载
- react native,实现android 应用编写
- React-Native学习笔记之:Modal实现覆盖效果(类似安卓中PopuWindow)
- Android 底部导航栏中间凸起、动态配置替换底部导航栏Tab图标(按钮、标签)的实现方案
- 微信小程序底部选项卡/导航栏实现方法
- flutter通过底部导航栏实现不同page之间的切换:
- Android学习之BottomNavigationBar实现Android特色底部导航栏
- 安卓微信底部导航栏的实现
- Reactnative Android键盘将底部导航tab顶起解决方案
- react native android使用react-native-tab-navigator来做底部导航tabbar(2)一个坑:navigator