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 :)