在很多教程中，使用createbottomtabnavigator都是用的icon，需要各种引入组件，甚至还要修改配置文件。我觉得太麻烦了，就想不能使用自定义png图片吗？研究了一番之后，终于解决了这个问题，自己引入png图片作为TabBar的图标。
因为此教程是根据前面几篇一同写的，所用知识点能够相互融合，所以这里的TabBar必须要用与前面几篇文章相同的技术原理——页面栈！
第一步，安装bottom-tabs（根据你电脑系统选择命令进行安装）：
npm install @react-navigation/bottom-tabs yarn add @react-navigation/bottom-tabs接着就是代码时刻，用我给出的代码示例，就是正常的页面效果。
/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ import 'react-native-gesture-handler'; import * as React from 'react'; import { Component } from 'react'; import {Image} from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import HomeScreen from './src/Home'; import UserListScreen from './src/UserList'; import OrderScreen from './src/Order'; import TopNav from './src/TopNav'; const Stack = createStackNavigator(); const Tab = createBottomTabNavigator(); export default class App extends Component { constructor(props){ super(props); } render(){ return ( <NavigationContainer> <Stack.Navigator mode="modal"> <Stack.Screen name="home" options={{title:'首页'}} component={TabBar} /> <Stack.Screen name="userList" options={{title:'用户列表'}} component={UserListScreen}/> <Stack.Screen name="allOrder" options={{title:'所有订单'}} component={OrderScreen}/> <Stack.Screen name="TopNav" component={TopNav}/> </Stack.Navigator> </NavigationContainer> ) } }; function TabBar(){ return( <Tab.Navigator screenOptions={({route})=>({ tabBarIcon:({focused,size,color})=>{ let icon; if(route.name==="首页"){ icon = focused ? ( <Image source={ require('./images/home1.png') } style={{ width: 25, height: 25, }} /> ) : ( <Image source={ require('./images/home.png') } style={{ width: 25, height: 25, }} />) }else if(route.name==="我的"){ icon = focused ? ( <Image source={ require('./images/me1.png') } style={{ width: 25, height: 25, }} /> ) : (<Image source={ require('./images/me.png') } style={{ width: 25, height: 25, }} />) } return icon; } })} tabBarOptions={{activeTintColor:"#07B5D1",inactiveTintColor:"gray"}} > <Tab.Screen name="首页" component={HomeScreen}/> <Tab.Screen name="我的" component={TopNav}/> </Tab.Navigator> ) }重点是在TabBar()这个函数中，你要搞明白，Tab.Screen是你的所有底部导航标签，写好TabBar之后，将TabBar添加到页面栈当中去。
想要实现自定义的png图片作为底部导航标签，那么需要定义Tab.Navigator里的属性screenOptions。首先定义一个变量icon，然后在对应的页面里判断focused 是否选中，如果选中了就赋值给icon一个选中的图标，也就是一个Image组件，路径根据你自己的文件夹所在地方进行引入。未选中的时候再赋值给icon一个png图片，接着在外面进行返回icon即可。
这里需要注意的是：focused,size,color这三个参数是screenOptions属性自带的，最需要用到的就是focused表示当前TabBar是否有被点中。size就是图标的大小，你可以像我上面代码那样，自己给Image一个大小。color也是可以自己进行定义。
以上就是TabBar的完整实现，有问题可以留言，帮你解决~
