Estoy estudiando reaccionar nativo y descubrí que tabBarOptions ya estaba en desuso. Sé que incluirlo en screenOptions es la nueva forma, pero ¿cómo hago esto con este código? Estoy tratando de combinarlos encerrándolos en un soporte, pero no funciona.
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;Quería compartir lo que he aprendido y descubrí que la solución es muy sencilla. Lo que hice fue establecer las screenOptions de pantalla establecidas en v6 y colocarlas todas encima de 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> ); };