在很多教程中，使用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的完整实现，有问题可以留言，帮你解决~