Использование маршрутизации React Navigation в React Native

Вашему приложению потребуется домашний экран HomeScreen. Экран HomeScreen будет отображать количество друзей, уже находящихся в вашей сети.

Возьмите код из файла App.js и добавьте его в новый файл с именем HomeScreen.js:

cp App.js HomeScreen.js

Откройте файл HomeScreen.js:

nano HomeScreen.js

Измените содержание файла HomeScreen.js для использования экрана HomeScreen вместо экрана 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;

Данный код будет генерировать сообщение-заглушку You have (undefined) friends. Точное значение вы получите позже.

Вашему приложению также потребуется дополнительный экран FriendsScreen. На экране FriendsScreen вы сможете добавлять новых друзей.

Возьмите код из файла App.js и добавьте его в новый файл с именем FriendsScreen.js:

cp App.js FriendsScreen.js

Откройте файл FriendsScreen.js:

nano FriendsScreen.js

Измените содержание файла FriendsScreen.js для использования экрана FriendsScreen вместо экрана 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;

Данный код будет добавлять текст Add friends here! в сообщение.

На данный момент у вас есть экраны HomeScreen и FriendsScreen. Однако вы не можете перемещаться между этими экранами. Вы реализуете данный функционал в следующем шаге.

В конце добавьте кнопки для перехода между двумя экранами.

В файле HomeScreen.js добавьте следующий код:

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

// ...

В файле FriendsScreen.js добавьте следующий код:

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

// ...

Давайте обсудим элемент this.props.navigation. Пока ваш экран включен в StackNavigator, он автоматически наследует множество полезных свойств объекта navigation. В этом случае вы использовали функцию navigate для перемещения на другую страницу.

Если вы сейчас откроете эмулятор, то сможете переходить между экранами HomeScreen и FriendsScreen.

Теперь вы можете добавлять друзей в файле App.js, но вам может потребоваться добавлять их в файле FriendsScreen.js и отображать количество друзей в файле HomeScreen.js. Поскольку данный проект разрабатывается с помощью React, вы можете внедрить данный функционал на ваши экраны с помощью контекста.

Чтобы избежать циклической зависимости, вам нужно создать новый файл FriendsContext:

nano FriendsContext.js

Экспортируйте FriendsContext:

import React from 'react';

export const FriendsContext = React.createContext();

Откройте App.js:

nano App.js

Импортируйте 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>
    );
  }
}

// ...

Данный код определяет FriendsContext в качестве нового объекта типа Context и оборачивает NavigationContainer в компонент Context.Provider, чтобы любые дочерние элементы в дереве компонента могли подписаться на изменения контекста.

Так как вы больше не используете View или Text, вы можете удалить эти импорты из react-native.

Вы должны будете предоставить элемент value, чтобы сделать данные доступными потребителям:

// ...

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

// ...

Это позволит HomeScreen и FriendsScreen ссылаться на любые изменения в контексте для currentFriends и possibleFriends.

Теперь вы можете поработать над ссылками на контекст в ваших экранах.

В этом шаге вы настроите отображения текущего количества друзей в приложении.

Откройте файл HomeScreen.js:

nano HomeScreen.js

Импортируйте 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;

// ...

Данный код определяет Class.contextType. Теперь вы можете получить доступ к контексту на ваших экранах.

Например, давайте заставим ваш экран HomeScreen отображать значение текущих друзей currentFriends для вас:

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;

// ...

Если снова открыть приложение в эмуляторе и перейти на экран HomeScreen, вы увидите сообщение: You have 0 friends!.

В этом шаге мы настроим отображение возможных друзей в приложении и предоставив кнопки для добавления возможных друзей в список текущих друзей.

Затем откройте файл FriendsScreen.js:

nano FriendsScreen.js

Импортируйте 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;

// ...

Данный код определяет Class.contextType.

Теперь создайте кнопку для добавления друзей в файле 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;

// ...

Если вы снова запустите приложение в эмуляторе и перейдете на экран FriendsScreen, то увидите список друзей, которых можно добавить к текущим друзьям.

Если вы перейдете на экран FriendsScreen и нажмете кнопку для добавления друзей, то увидите, что список возможных друзей possibleFriends сократился. Если же перейти на экран HomeScreen, то можно увидеть, как выросло количество текущих друзей.

Теперь вы можете переходить между экранами и организовать обмен данными между ними.