如何将此 React Navigation v5 代码更改为 v6？

Question

我正在研究 React Native，发现 tabBarOptions 已经被弃用了。我知道将它包含在 screenOptions 中是新方法，但我如何使用此代码执行此操作？我试图通过将它们括在括号中来组合它们，但它不起作用。


import {StyleSheet, Text, View} from 'react-native';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

import ScreenA from './NavScreen/ScreenA';
import ScreenB from './NavScreen/ScreenB';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';

const Tab = createBottomTabNavigator();

const RNTabNavMaterialTab = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({route}) => ({
          tabBarIcon: ({focused, size, color}) => {
            let iconName;
            if (route.name === 'Screen_A') {
              iconName = 'autoprefixer';
              size = focused ? 25 : 20;
              // color = focused ? '#f0f' : '#555';
            } else if (route.name === 'Screen_B') {
              iconName = 'btc';
              size = focused ? 25 : 20;
              // color = focused ? '#f0f' : '#555';
            }
            return <FontAwesome5 name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: '#f0f',
          inactiveTintColor: '#555',
          activeBackgroundColor: '#fff',
          inactiveBackgroundColor: '#999',
          showLabel: true,
          labelStyle: {fontSize: 14},
          showIcon: true,
        }}
        activeColor="#f0edf6"
        inactiveColor="#3e2465"
        barStyle={{backgroundColor: '#694fad'}}>
        <Tab.Screen
          name="Screen_A"
          component={ScreenA}
          options={{headerShown: false}}
        />
        <Tab.Screen
          name="Screen_B"
          component={ScreenB}
          options={{headerShown: false}}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default RNTabNavMaterialTab;

Answer 1

我想分享我所学到的，发现解决方案非常简单。我所做的是在 v6 中设置 screenOptions 集并将所有这些设置在 tabBarIcon.

之上

const RNTabNavMaterialTab = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator
          screenOptions={({route}) => ({
          tabBarActiveTintColor: "#f0f",
          tabBarInactiveTintColor: "#555",
          tabBarActiveBackgroundColor: "#fff",
          tabBarInactiveBackgroundColor: "#999",
          tabBarShowLabel: true,
          tabBarLabelStyle: {"fontSize": 14},
          tabBarStyle: [{"display": "flex"},null],
          tabBarIcon: ({focused, size, color}) => {
            let iconName;
            if (route.name === 'Screen_A') {
              iconName = 'autoprefixer';
              size = focused ? 25 : 20;
              // color = focused ? '#f0f' : '#555';
            } else if (route.name === 'Screen_B') {
              iconName = 'btc';
              size = focused ? 25 : 20;
              // color = focused ? '#f0f' : '#555';
            }
            return <FontAwesome5 name={iconName} size={size} color={color} />;
          },
        })}>
        <Tab.Screen
          name="Screen_A"
          component={ScreenA}
          options={{headerShown: false}}
        />
        <Tab.Screen
          name="Screen_B"
          component={ScreenB}
          options={{headerShown: false}}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

如何将此 React Navigation v5 代码更改为 v6？

How do I change this React Navigation v5 code to v6?

javascript

jsx

react-native

react-native-tabnavigator

react-navigation-v6