Hola chicos, estoy tratando de usar el archivo ViewCart como un componente en mi proyecto, pero no se muestra, ¿no sé por qué? pero cuando lo escribí en todo el código en mi archivo App.js funciona bien. dígame por qué está sucediendo y también dígame cómo usar el archivo Viewcart como un componente en mi proyecto. Si tiene alguna consulta, no dude en preguntar.
// VerCarrito.js
Este archivo que quiero usar en mi archivo App.js como componente
import * as React from 'react'; import { View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; function HomeScreen() { return ( <View > <Text>Home Screen</Text> </View> ); } const Stack = createNativeStackNavigator(); function ViewCart() { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> </Stack.Navigator> </NavigationContainer> ); } export default ViewCart;Aplicación.js
import { StatusBar } from "expo-status-bar"; import React from "react"; import { StyleSheet, Text, View } from "react-native"; import ViewCart from "./screens/ViewCart"; function App() { return ( <View style={styles.container}> <ViewCart /> {/* <StatusBar style="auto" /> */} </View> ); } const styles = StyleSheet.create({ // container: { // flex: 1, // backgroundColor: "#fff", // alignItems: "center", // justifyContent: "center", // }, }); export default App;Espero que esta solución funcione.
Puntos de diablillo
Simplemente elimine NavigationContainer de ViewCart.js y agregue NavigationContainer en App.js
Puedes leer el Doc oficial:
Haga clic y lea el documento oficial
ViewCart.js
import * as React from 'react'; import { View, Text } from 'react-native'; import { createNativeStackNavigator } from '@react-navigation/native- stack'; function HomeScreen() { return ( <View > <Text>Home Screen</Text> </View> ); } const Stack = createNativeStackNavigator(); function ViewCart() { return ( <> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> </Stack.Navigator> </> ); } export default ViewCart;Aplicación.js
import { StatusBar } from "expo-status-bar"; import React from "react"; import { StyleSheet, Text, View } from "react-native"; import { NavigationContainer } from '@react-navigation/native'; import ViewCart from "./ViewCart"; function App() { return ( <NavigationContainer style={styles.container}> <ViewCart /> {/* <StatusBar style="auto" /> */} </NavigationContainer> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", }, }); export default App; Espero que esto funcione :)
Manifestación