Cómo usar el enrutamiento con React Navigation en React Native

Su aplicación necesitará una pantalla HomeScreen. La pantalla HomeScreen mostrará el número de amigos que ya están en su red.

Tome el código de App.js y agréguelo a un nuevo archivo llamado HomeScreen.js:

cp App.js HomeScreen.js

Abra HomeScreen.js:

nano HomeScreen.js

Modifique HomeScreen.js para usar HomeScreen en vez de laApp:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>You have (undefined) friends.</Text>
      </View>
    );
  }
}

// ...

export default HomeScreen;

Este código producirá un mensaje de marcador de posición Tiene amigos (sin definir). Deberá proporcionar un valor más adelante.

Su aplicación también necesitará una pantalla FriendsScreen. En la pantalla FriendsScreen, podrá agregar nuevos amigos.

Tome el código de App.js y agréguelo a un nuevo archivo llamado FriendsScreen.js:

cp App.js FriendsScreen.js

Abra FriendsScreen.js:

nano FriendsScreen.js

Modifique FriendsScreen.js para usar FriendsScreen en vez de la aplicación:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

class FriendsScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Add friends here!</Text>
      </View>
    );
  }
}

// ...

export default FriendsScreen;

Este código producirá un mensaje Agregar amigos aquí (¡funcionó!).

En este momento, tiene una pantalla HomeScreen y una FriendsScreen. Sin embargo, no hay forma de navegar entre ellas. Creará esta funcionalidad en el siguiente paso.

Finalmente, agregue botones para poder navegar entre las dos pantallas.

En HomeScreen.js, agregue el siguiente código:

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>You have (undefined) friends.</Text>

        <Button
          title="Add some friends"
          onPress={() =>
            this.props.navigation.navigate('Friends')
          }
        />
      </View>
    );
  }
}

// ...

En FriendsScreen.js, agregue el siguiente código:

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

class FriendsScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Add friends here!</Text>

        <Button
          title="Back to home"
          onPress={() =>
            this.props.navigation.navigate('Home')
          }
        />
      </View>
    );
  }
}

// ...

Vamos a hablar de this.props.navigation. Mientras su pantalla esté incluida en el StackNavigator, hereda automáticamente muchas propiedades del objeto navigation. En este caso, se utilizó navigate para pasar a una página diferente.

Si abre el simulador ahora, puede navegar entre la pantalla HomeScreen y FriendsScreen.

Ahora puede agregar amigos en App.js, pero deberá agregarlos a FriendsScreen.js y hacer que se muestren en HomeScreen.js. En vista de que este proyecto se crea con React, puede introducir esta funcionalidad en las pantallas con contexto.

Para evitar una referencia circular, necesitará un nuevo archivo FriendsContext:

nano FriendsContext.js

Exporte FriendsContext:

import React from 'react';

export const FriendsContext = React.createContext();

Abra App.js:

nano App.js

Agregue FriendsContext:

import 'react-native-gesture-handler';
import React from 'react';
import { StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { FriendsContext } from './FriendsContext';
import Home from './Home';
import Friends from './Friends';

const Stack = createStackNavigator();

class App extends React.Component {
  // ...

  render() {
    return (
      <FriendsContext.Provider>
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen
              name="Home"
              component={Home}
            />
            <Stack.Screen
              name="Friends"
              component={Friends}
            />
          </Stack.Navigator>
        </NavigationContainer>
      </FriendsContext.Provider>
    );
  }
}

// ...

Este código establece FriendsContext como un nuevo objeto Context y ajusta NavigationContainer en un componente Context.Provider para que cualquier elemento secundario en el árbol de componentes pueda suscribirse a cambios de contexto.

En vista de que ya no está usando View o Text, es posible eliminar esas importaciones desde react-native.

Deberá proporcionar un valor para hacer que los consumidores puedan acceder a los datos:

// ...

class App extends React.Component {
  // ...

  render() {
    return (
      <FriendsContext.Provider
        value={
          {
            currentFriends: this.state.currentFriends,
            possibleFriends: this.state.possibleFriends,
            addFriend: this.addFriend
          }
        }
      >
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen
              name="Home"
              component={Home}
            />
            <Stack.Screen
              name="Friends"
              component={Friends}
            />
          </Stack.Navigator>
        </NavigationContainer>
      </FriendsContext.Provider>
    );
  }
}

// ...

Esto permitirá que HomeScreen y FriendsScreen hagan referencia sobre cualquier cambio de contexto a currentFriends y possibleFriends.

Ahora puede trabajar en cómo hacer referencia al contexto en las pantallas.

En este paso, configurará la aplicación para que muestre el recuento actual de amigos.

Abra HomeScreen.js:

nano HomeScreen.js

Y agregue FriendsContext:

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { FriendsContext } from './FriendsContext';

class HomeScreen extends React.Component {
  // ...
}
HomeScreen.contextType = FriendsContext;

// ...

Este código establece un Class.contextType. Ahora puede acceder al contexto en las pantallas.

Por ejemplo, vamos a hacer que su pantalla HomeScreen muestre cuántos currentFriends tiene:

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { FriendsContext } from './FriendsContext';

class Home extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>You have { this.context.currentFriends.length } friends!</Text>

        <Button
          title="Add some friends"
          onPress={() =>
            this.props.navigation.navigate('Friends')
          }
        />
      </View>
    );
  }
}
HomeScreen.contextType = FriendsContext;

// ...

Si vuelve a abrir su aplicación en el simulador y visualiza HomeScreen, verá el mensaje: Tiene 0 amigos.

En este paso, configurará la aplicación para que muestre posibles amigos y proporcione botones para agregarlos a los amigos actuales.

A continuación, abra FriendsScreen.js:

nano FriendsScreen.js

Y agregue FriendsContext:

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { FriendsContext } from './FriendsContext';

class FriendsScreen extends React.Component {
  // ...
}
FriendsScreen.contextType = FriendsContext;

// ...

Este código establece un Class.contextType.

Ahora, cree un botón para agregar amigos en FriendsScreen.js:

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { FriendsContext } from './FriendsContext';

class Friends extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Add friends here!</Text>

        {
          this.context.possibleFriends.map((friend, index) => (
            <Button
              key={ friend }
              title={ `Add ${ friend }` }
              onPress={() =>
                this.context.addFriend(index)
              }
            />
          ))
        }

        <Button
          title="Back to home"
          onPress={() =>
            this.props.navigation.navigate('Home')
          }
        />
      </View>
    );
  }
}
FriendsScreen.contextType = FriendsContext;

// ...

Si vuelve a abrir su aplicación en el simulador y visualizar FriendsScreen, verá una lista de amigos para agregar.

Si visita FriendsScreen y hace clic en el botón para agregar amigos, verá que la lista de possibleFriends se reduce. Si visita HomeScreen, verá que el número de amigos aumenta.

Ahora, puede navegar entre pantallas y compartir datos entre ellas.