Como usar o roteamento com React Navigation no React Native

Seu aplicativo precisará de uma tela HomeScreen. HomeScreen irá exibir o número de amigos que já estão em sua rede.

Pegue o código de App.js e adicione-o a um novo arquivo chamado HomeScreen.js:

cp App.js HomeScreen.js

Abra o HomeScreen.js:

nano HomeScreen.js

Modifique HomeScreen.js para usar HomeScreen em vez de App:

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;

Esse código irá produzir um placeholder de mensagem You have (undefined) friends. Você fornecerá um valor mais tarde.

Seu aplicativo também precisará de uma tela FriendsScreen. Em FriendsScreen você será capaz de adicionar novos amigos.

Pegue o código de App.js e adicione-o a um novo arquivo chamado FriendScreen.js:

cp App.js FriendsScreen.js

Abra o FriendsScreen.js:

nano FriendsScreen.js

Modifique FriendScreen.js para usar FriendScreen em vez de App:

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;

Esse código irá produzir um Add friends here! como mensagem.

Neste ponto, você tem as telas HomeScreen e FriendsScreen. No entanto, não há nenhuma maneira de navegar entre elas. Você criará essa funcionalidade no próximo passo.

Finalmente, adicione botões para alternar entre as duas telas.

Em HomeScreen.js, adicione o seguinte 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>
    );
  }
}

// ...

Em FriendsScreen.js, adicione o seguinte 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 falar sobre this.props.navigation. Uma vez que sua tela esteja incluída no StackNavigator, ela herda automaticamente muitas propriedades úteis do objeto navigation. Neste caso, você usou navigate para mover-se para uma página diferente.

Se você abrir seu simulador agora, poderá navegar entre HomeScreen e FriendsScreen.

Agora, você pode adicionar amigos em App.js, mas você desejará adicioná-los ao FriendsScreen.js e exibí-los em HomeScreen.js. Como este projeto é construído com React, é possível injetar essa funcionalidade em suas telas com contexto.

Para evitar uma referência circular, você desejará um novo arquivo FriendsContext:

nano FriendsContext.js

Exporte FriendsContext:

import React from 'react';

export const FriendsContext = React.createContext();

Abra App.js:

nano App.js

Adicione o 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>
    );
  }
}

// ...

Esse código estabelece FriendsContext como um novo objeto Context e encapsula o NavigationContainer em um componente Context.Provider para que qualquer filho na árvore de componentes possa se inscrever para mudanças de contexto.

Como você não está usando View ou Text, é possível remover essas importações do react-native.

Você precisará fornecer um value para tornar os dados acessíveis pelos consumidores:

// ...

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>
    );
  }
}

// ...

Isso permitirá que HomeScreen e FriendsScreen façam referência a qualquer alteração de contexto para currentFriends e possibleFriends.

Agora, você pode trabalhar fazendo referência ao contexto em suas telas.

Neste passo, você irá configurar o aplicativo para exibir a contagem atual de amigos.

Abra o HomeScreen.js:

nano HomeScreen.js

E adicione o 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;

// ...

Esse código estabelece um Class.contextType. Agora, você pode acessar contexto em suas telas.

Por exemplo, vamos fazer com que sua HomeScreen exiba quantos currentFriends você tem:

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;

// ...

Se você abrir seu aplicativo novamente no simulador e visualizar a HomeScreen, você verá a mensagem: You have 0 friends!.

Neste passo, você irá configurar o aplicativo para exibir os possíveis amigos e fornecer botões para adicioná-los aos amigos atuais.

Em seguida, abra o FriendsScreen.js:

nano FriendsScreen.js

E adicione o 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;

// ...

Esse código estabelece um Class.contextType.

Agora, crie um botão para adicionar amigos em 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;

// ...

Se você abrir seu aplicativo novamente no simulador e visualizar a FriendsScreen, você verá uma lista de amigos a adicionar.

Se você visitar a FriendsScreen e clicar no botão para adicionar amigos, verá a lista de possibleFriends diminuir. Se você visitar HomeScreen, você verá o número de amigos crescer.

Agora, você pode navegar entre telas e compartilhar dados entre elas.