No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

14D
4H
32M
50S

Stacks de navegaci贸n

14/16
Recursos

Aportes 17

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

He aqu铆 la importancia de saber Ingl茅s y tener comprehensi贸n; la documentaci贸n dice que la versi贸n 5 para atr谩s ya no es mantenida. Lo que da cabida a muchos errores de compatibilidad.
Para evitar horas de debuggeo yo simplemente us茅 la versi贸n recomendada por la misma documentaci贸n y todo funciona correctamente.

Antes de que continues esta clase. Instala la versi贸n 6.x de React Navigation. Ahorrate dolores de cabeza.

Para los que est谩n en la versi贸n 6 de react-navigation, as铆 quedar铆a el componente NavigationStack.js

import { createNativeStackNavigator } from "@react-navigation/native-stack";
import HomeScreen from "../screens/HomeScreen";
import Settings from "../screens/SettingsScreen";

const Stack = createNativeStackNavigator();

export default function NavigationStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

Les recomiendo fuertemente seguir la documentaci贸n. El curso necesita una actualizaci贸n en esta parte.

Me parece mejorcito extraer enseguida el props as铆, en vez de colocar (props)

export default function HomeScreen({navigation}) {

    const { navigate } = navigation;

    const goToSettings = () => {
        navigate("Settings")
    }

Yo agregar铆a para ir a una pantalla anterior como

navigation.goBack();
  • Shortcut para crear un componente r谩pidamente:
rnf 

Para los que hayan tenido el problema con @babel/plugin-proposal-export-namespace-from
Tuve que parar obviamente el server, ingresar el comando:
yarn add react-native-reanimated

Luego ir al babel.config.js y colorar sobre el final:
module.exports = {
presets: [鈥榤odule:metro-react-native-babel-preset鈥橾,
plugins: [
鈥榬eact-native-reanimated/plugin鈥,
],
};

Por 煤ltimo el comando yarn cache clean (muy importante) e iniciar el server normlamente.
Espero que les sirva!

Lee la documentaci贸n!

Cuando les muestre error de importaci贸n de CreateStackNavigator

Para seguirle el ritmo pongan el video en 0.85x por que va a mil por hora 馃槀

Para hacer un c贸digo m谩s elegante y ahorrar l铆neas pueden realizar la desestructuraci贸n de la siguiente manera

export default function SettingsScreen( { navigation } ) {}

馃槑 Les dejo mis notas de esta clase Notion

para los que lo hagan con la version 5 y no les funcione por un error tiene que agregar esta linea en el archivo de babel

plugins: [鈥榬eact-native-reanimated/plugin鈥橾,

saludos

Ahora createStackNavigator() combi贸 por esto:

import { createNativeStackNavigator } from '@react-navigation/native-stack';

Mirenlo aqu铆

Para los que vamos en el a帽o 2023, con RN CLI y typescript, pueden utilizar useNavigation para provocar la navegaci贸n, de lo contrario est谩n completamente ligados a enviarlo por props y en typescript es mas complicado el manejo de las mismas.

const navigation = useNavigation<ProfileScreenNavigationProp>();

TIPADO CON TYPESCRIPT
Si est谩n usando typescript y quieren tipar los props:
Crean un archivo llamado types.d.ts dentro de la carpeta navigation y colocan:

import type { CompositeScreenProps, NavigatorScreenParams} from '@react-navigation/native';
import type { StackScreenProps } from '@react-navigation/stack';
import type { BottomTabScreenProps } from '@react-navigation/bottom-tabs';
  
export type RootStackParamList = {
    Home: NavigatorScreenParams<HomeTabParamList>;
    Settings: undefined;
};
  
export type RootStackScreenProps<T extends keyof RootStackParamList> = StackScreenProps<RootStackParamList, T>;

  
declare global {
    namespace ReactNavigation {
        interface RootParamList extends RootStackParamList {}
    }
}

Ese c贸digo lo obtuve de la documentaci贸n pero lo adapt茅 al ejemplo del profesor.
Y ahora dentro de HomeScreen.ts

import { View, Text, Button } from "react-native";
import type { StackScreenProps } from "@react-navigation/stack";
import { RootStackParamList } from "../navigation/types";


export function HomeScreen({navigation}: StackScreenProps<RootStackParamList, "Home">): JSX.Element {
    const goToSettings = () => {
        navigation.navigate("Home");
    }

    return (
        <View>
            <Text>This is homeScreen</Text>
            <Text>This is homeScreen</Text>
            <Text>This is homeScreen</Text>
            <Text>This is homeScreen</Text>
            <Button onPress={goToSettings} title="Go to settings"/>
        </View>   
    )
}

Excelente curso!! 馃槑