Intenté crear Navegación inferior,
Siguiendo este enlace: https://reactnavigation.org/docs/tab-based-navigation/#customizing-the-appearance
y aquí está mi código:
import React from "react"; import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; import Ionicons from "react-native-vector-icons"; // Screens import Home from "./Home"; import Settings from "./Settings"; const Tab = createBottomTabNavigator(); function MainContainer({ navigation }) { return ( <Tab.Navigator screenOptions={({ route }) => ({ tabBarIcon: ({ focused, color, size }) => { let iconName; if (route.name === "Home") { iconName = focused ? "ios-information-circle" : "ios-information-circle-outline"; } else if (route.name === "Settings") { iconName = focused ? "ios-list-box" : "ios-list"; } return <Ionicons name={iconName} size={size} color={color} />; }, tabBarActiveTintColor: "tomato", tabBarInactiveTintColor: "gray", })} > <Tab.Screen name="Home" component={Home} /> <Tab.Screen name="Settings" component={Settings} /> </Tab.Navigator> ); } export default MainContainer;Pero tengo este error:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `TabBarIcon`. Descubrí el error,
en la import Ionicons from "react-native-vector-icons"; debería haber sido import Ionicons from "react-native-vector-icons/Ionicons"
Soluciones:
Necesita envolver su <Tab.Navigator> en el contenedor de navegación raíz
Ejemplo:
Primero debe instalar la dependencia de @react-navigation/native
import {NavigationContainer} from '@react-navigation/native'; import {createStackNavigator} from '@react-navigation/stack'; import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; const Stack = createStackNavigator(); const Tab = createBottomTabNavigator(); const MainContainer = () => { return ( <NavigationContainer> <Tab.Navigator /> <Stack.Navigator /> ...other your navigation </NavigationContainer> ); };Puede consultar react-navigaiton https://reactnavigation.org/docs/getting-started/
Simplemente envuelva su <Tab.Navigator> en <NavigationContainer>
import React from "react"; import { NavigationContainer } from '@react-navigation/native' //Reset Imports const Routes = () => { return ( <NavigationContainer> <Tab.Navigator> </Tab.Navigator> </NavigationContainer> ) } export default Routes