y soy un principiante en la codificación. sigo tutoriales en youtube y otras fuentes en línea. Estoy haciendo un proyecto de exposición que consiste en un navegador de pestañas inferior, pero sigo recibiendo un mensaje de error: Error: Crear un navegador no requiere argumento. ¿Quizás estás tratando de usar la API de React Navigation 4? Consulte https://reactnavigation.org/docs/hello-react-navigation para obtener las últimas API y guías.
Aquí está mi aplicación.js:
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import Explore from './screens/Explore'; import Saved from './screens/Saved'; import Trips from './screens/Trips'; import Inbox from './screens/Inbox'; class App extends React.Component { render() { return ( <View style={styles.container}> <Text>Open up App.js to start working on your app!</Text> </View> ); } } export default createBottomTabNavigator({ Explore:{ screen:Explore }, Saved:{ screen:Saved }, Trips:{ screen:Trips }, Inbox:{ screen:Inbox } }) const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });y aquí está mi archivo package.json:
"dependencies": { "@react-navigation/bottom-tabs": "^6.2.0", "@react-navigation/native": "^6.0.8", "@react-navigation/native-stack": "^6.5.0", "expo": "~44.0.0", "expo-status-bar": "~1.2.0", "react": "17.0.1", "react-dom": "17.0.1", "react-native": "0.64.3", "react-native-gesture-handler": "~2.1.0", "react-native-reanimated": "~2.3.1", "react-native-safe-area-context": "3.3.2", "react-native-screens": "~3.10.1", "react-native-web": "0.17.1", "react-navigation": "^4.4.4" },Seguí la página de documentación de reaccionar y todavía no pude resolverlo, así que, por favor, ¿alguien puede ayudarme? Gracias
La forma en que ha definido su navegador no es correcta en React Navigation 6. En lugar de:
export default createBottomTabNavigator({ Explore:{ screen:Explore }, Saved:{ screen:Saved }, Trips:{ screen:Trips }, Inbox:{ screen:Inbox } })Hacer:
const Tab = createBottomTabNavigator(); export default function BottomTabs() { return ( <Tab.Navigator> <Tab.Screen name="Explore" component={Explore} /> <Tab.Screen name="Saved" component={Saved} /> <Tab.Screen name="Trips" component={Trips} /> <Tab.Screen name="Inbox" component={Inbox} /> </Tab.Navigator> ); }Siempre debe leer primero la documentación oficial y luego seguir los tutoriales de terceros si tiene problemas para comprender la documentación o desea obtener más ejemplos.