0

como están? Tengo mi aplicación de react native que se basa en mi archivo app.js de la siguiente manera:

App.js

import React from 'react';
import { StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Home from './screens/Home';
import DetailsRestaurant from './screens/DetailsRestaurant';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name='Home' component={Home} options={{ headerShown: false}} />
        <Stack.Screen name='DetailsRestaurant' options={{ headerShown: false }} component={DetailsRestaurant}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

y dentro de mi archivo Home.js, que sería una screen de mi app tengo el siguiente codigo:

Home.js

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator tabBarOptions={{inactiveTintColor: 'grey',activeTintColor: 'black',}}>
      <Tab.Screen name="Explore" component={Explore} options={{tabBarIcon: ({ color, size }) => (<Feather name="search" size={size} color={color} />),}}/>
      <Tab.Screen name='Map' component={Map} options={{tabBarIcon: ({ color, size }) => (<Feather name="map" size={size} color={color} />),}}/>
      <Tab.Screen name='Add' component={Add} options={{ tabBarIcon: ({ color, size }) => ( <Ionicons name="ios-add-circle-sharp" size={size} color={color} />),headerShown: false,}}/>
      <Tab.Screen name='Bookings' component={Bookings} options={{ tabBarIcon: ({ color, size }) => (<AntDesign name="book" size={size} color={color} />),}}/>
      <Tab.Screen name='User' component={User} options={{tabBarIcon: ({ color, size }) => (<AntDesign name="user" size={size} color={color} />),}}/>
    </Tab.Navigator>
  );
}

const Home = () => {
  return (
    <ScrollView>
        <Header />
        <SearchBar />
        <QuickSearch />
        <List
            title="Reservas disponibles"
            allData={[
                { name: 'Cuatro catorce', time: '21:00' },
                { name: 'Standard 6 9', time: '21:00' },
                { name: 'Bodega', time: '22:00' },
            ]}
        />
        <List style={{marginBottom:'8',}}
            title="Vuelve a reservar"
            allData={[
                { name: 'Cuatro catorce', time: '21:00' },
                { name: 'Standard 6 9', time: '21:00' },
                { name: 'Bodega', time: '22:00' },
        ]}
        />
        <MyTabs />
    </ScrollView>
  )
}

export default Home;

Aca mi problema, ese Tab.navigator no funciona, es decir para ser especifico no hace nada, no tira ni error ni advertencia, apretas cualquier item y solamente lo pone negro. No se donde está el error debido a que me base en una parte de la documentación y tampoco me da errores por consola, entonces estoy algo perdido. Alguien podria ayudarme? Cualquier duda o mala explicación de mi parte me dicen y me expreso de otra manera, gracias por su tiempo :)

1 respuesta 1

1

Hay fallos de implementación del createBottomStackNavigator, te recomiendo que inicialmente declares una versión minimalista de tu idea de navigation y luego ya le das forma.

Tienes que seguir el patrón de la documentación.

Cuando has implementado el createNativeStackNavigator en App() lo veo bien, no parece que tiene que haber problemas.

Pero cuando has implementado el createBottomStackNavigator ahí no has seguido la documentación. Si quieres crear este createBottomStackNavigator para la screen Home, trata:

"App" como si fuese tu "Home" en esta documentación. Y "HomeScreen", "SettingsScreen" Seran tus Explore, Map, Add.. etc

Espero haberme explicado. Cuentanos que tal se soluciona. Un saludo.

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

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
1
  • Sii, te explicaste muy bien. De hecho lo había hecho antes asi pero hay una screen que no debe aparecer en el tab navigator y no se como declararla o acceder a ella. Siendo más preciso es al clickear una imagen, se irá a la pantalla de detalles de dicha imagen y no se como realizar eso con tab.navigator. Y sin el tab navigator no se como hacer la barra de navegación. Espero que se me haya entendido! Muchas gracias por ayudarme! Commented el 21 mar. 2023 a las 8:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.