React 导航自定义底部选项卡图像

Question

我使用 React Navigation v6 创建了自定义底部选项卡导航，我提供图像作为底部导航的图标，如何在我的

CustomTabBar

中提供动态图像，目前我对所有内容使用一个图像我的

Tab.Screen

，我如何为每个

Tab.Screen

使用或传递不同的图像？还有一件事，道具的类型是什么？我使用

@ts-ignore

忽略了类型错误，实际上道具的类型是什么。 如果有人能帮我解决这个问题，我将不胜感激，因为对 React Native 来说还很陌生：

这是

MyTabs.tsx

import React from 'react';
import {Image, TouchableOpacity, View} from 'react-native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import HomeScreen from '../screens/home/HomeScreen';
import NewsScreen from '../screens/news/NewsScreen';

// Define custom tab bar component
//@ts-ignore
function CustomTabBar({state, descriptors, navigation}) {
  return (
    <View
  style={{
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#2C2C2C',
    height: 100,
    width: '100%',
    borderTopLeftRadius: 60,
    borderTopRightRadius: 60,
    position: 'absolute',
    bottom: 0,
  }}>
  {/**@ts-ignore */}
  {state.routes.map((route, index) => {
    const {options} = descriptors[route.key];
    const label =
      options.tabBarLabel !== undefined
        ? options.tabBarLabel
        : options.title !== undefined
        ? options.title
        : route.name;
    const isFocused = state.index === index;

    const onPress = () => {
      const event = navigation.emit({
        type: 'tabPress',
        target: route.key,
      });

      if (!isFocused && !event.defaultPrevented) {
        navigation.navigate(route.name);
      }
    };

    const onLongPress = () => {
      navigation.emit({
        type: 'tabLongPress',
        target: route.key,
      });
    };

    return (
      <TouchableOpacity
        accessibilityRole="button"
        accessibilityState={isFocused ? {selected: true} : {}}
        accessibilityLabel={options.tabBarAccessibilityLabel}
        testID={options.tabBarTestID}
        onPress={onPress}
        onLongPress={onLongPress}
        style={{padding: 8}}
        key={route.key}>
        <Image
          source={require('../assets/icons/homeIcon.png')}
          style={{
            width: 24,
            height: 24,
            tintColor: isFocused ? '#2196F3' : '#666',
          }}
        />
      </TouchableOpacity>
    );
  })}
    </View>
  );
}

// Define tab navigator
const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
  <Tab.Navigator
  screenOptions={{headerShown: false}}
  tabBar={props => <CustomTabBar {...props} />}>
  <Tab.Screen
    name="Home"
    component={HomeScreen}
    options={{
      tabBarIcon: ({size, focused}) => (
        <Image
          source={require('../assets/icons/homeIcon.png')}
          style={{width: size, height: size}}
        />
      ),
    }}
  />
  <Tab.Screen
    name="News"
    component={NewsScreen}
    options={{
      tabBarIcon: ({size, focused}) => (
        <Image
          source={require('../assets/icons/mapIcon.png')}
          style={{width: size, height: size}}
        />
      ),
    }}
  />
    </Tab.Navigator>
  );
}

export default MyTabs;

Answer 1

这是如何为每个选项卡设置不同图像的示例

如果将函数传递给

Tab.Navigator's screenOptions prop

，它会使用一个对象调用该函数，该对象包含一个

route

对象，该对象具有

name

参数：

<Tab.Navigator screenOptions={params => getOptionsForRoute(params)}>

然后您可以创建一个函数来对每个呼叫进行不同的应答：

const getOptionsForRoute = ({route}) => {
    return {
        headerShown: false,
        tabBarIcon: ({ focused }) => {
            return <YourIconComponent route={route} focused={focused} />;
        },
    }
}

然后，您可以创建一个组件（

YourIconComponent

）来读取路线和聚焦道具，并为每种情况（每个选项卡和聚焦/未聚焦状态）呈现正确的图标。

您还可以返回其他参数来更改标签文本、标签样式等。在此处检查所有可能的选项