您的位置:首页 > Web前端 > React

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

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: