我如何改变这个React导航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

我想分享我所学到的和发现的解决方案非常简单。我所做的是将screenOptions设置为v6，并将所有这些设置置于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>
);
};