Как использовать маршрутизацию с навигацией React в React Native
Введение
Реагировать на родное приложение.
Эта библиотека помогает решить проблему навигации между несколькими экранами и обмена данными между ними.
В конце этого урока у вас будет элементарная социальная сеть. Он будет отображать количество подключений, которые есть у пользователя, и предоставит возможность подключиться к дополнительным друзьям. Вы будете использовать этот образец приложения, чтобы узнать, как перемещаться по экранам мобильных приложений с помощью react-navigation.
Предпосылки
Для выполнения этого урока вам понадобится:
- Локальная среда разработки для Node.js. Следуйте инструкциям по установке Node.js и созданию локальной среды разработки.
- Знакомство с настройкой среды для создания нового проекта React Native и использования симуляторов iOS или Android может оказаться полезным.
Примечание. Если вы раньше работали с react-navigation, вы можете столкнуться с некоторыми отличиями. Вы можете обратиться к документации для руководств по миграции с 4.x.
Это руководство было проверено с помощью Node v14.7.0, npm v6.14.7, react v16.13.1, react-native v0.63.2, @react-navigation/native v5.7.3 и @react-navigation/stack v5.9.0.
Шаг 1 — Создание нового приложения React Native
Сначала создайте новое приложение React Native, введя в терминале следующую команду:
- npx react-native init MySocialNetwork --version 0.63.2
Затем перейдите в новый каталог:
- cd MySocialNetwork
И запускаем приложение для iOS:
- npm run ios
В качестве альтернативы для Android:
- npm run android
Примечание. Если у вас возникнут какие-либо проблемы, вам может потребоваться консультация по устранению неполадок для React Native CLI.
Это создаст для вас скелет проекта. Сейчас это не очень похоже на социальную сеть. Давайте это исправим.
Откройте App.js:
- nano App.js
Замените содержимое App.js следующим кодом, чтобы отобразить приветственное сообщение:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Welcome to MySocialNetwork!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default App;
Сохраните файл. Теперь, когда вы запускаете приложение, появляется сообщение «Добро пожаловать в MySocialNetwork!». сообщение появится в вашем симуляторе.
На следующем шаге вы добавите в приложение дополнительные экраны.
Шаг 2 — Создание домашнего экрана и экрана друзей
В настоящее время у вас есть один экран с приветственным сообщением. На этом шаге вы создадите два экрана для своего приложения: HomeScreen и FriendsScreen.
Домашний экран
Вашему приложению потребуется 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;
Этот код выдаст сообщение У вас есть (неопределенные) друзья. замещающее сообщение. Вы предоставите значение позже.
ДрузьяЭкран
Вашему приложению также потребуется 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;
Этот код вызовет добавление друзей! сообщение.
На данный момент у вас есть HomeScreen и FriendsScreen. Однако между ними нет возможности перемещаться. Вы создадите эту функциональность на следующем шаге.
Шаг 3 — Использование StackNavigator с навигацией React
Для навигации между экранами вы будете использовать StackNavigator. StackNavigator работает точно так же, как стек вызовов. Каждый экран, на который вы переходите, перемещается на вершину стека. Каждый раз, когда вы нажимаете кнопку «Назад», экраны выскакивают из верхней части стека.
Сначала установите @react-navigation/native:
- npm install @react-navigation/native@5.7.3
Затем установите @react-navigation/stack и его одноранговые зависимости:
- npm install @react-navigation/stack@5.9.0 @react-native-community/masked-view@0.1.10 react-native-screens@2.10.1 react-native-safe-area-context@3.1.4 react-native-gesture-handler@1.7.0
Примечание. Если вы разрабатываете для iOS, вам может потребоваться перейти в каталог ios и запустить pod install.
Затем вернитесь к App.js:
- nano App.js
Добавьте NavigationContainer и createStackNavigator в App.js:
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';
const Stack = createStackNavigator();
Затем замените содержимое render:
// ...
class App extends React.Component {
render() {
return (
<NavigationContainer>
<Stack.Navigator>
</Stack.Navigator>
</NavigationContainer>
);
}
}
// ...
Вложенный внутрь HomeScreen:
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 HomeScreen from './HomeScreen';
const Stack = createStackNavigator();
class App extends React.Component {
render() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
}
// ...
Этот код создает очень маленький стек для вашего навигатора только с одним экраном: HomeScreen.
Вложенный внутрь FriendsScreen:
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 HomeScreen from './HomeScreen';
import FriendsScreen from './FriendsScreen';
const Stack = createStackNavigator();
class App extends React.Component {
render() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
/>
<Stack.Screen
name="Friends"
component={FriendsScreen}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
}
// ...
Этот код добавляет FriendsScreen в навигатор.
Примечание. Это отличается от того, как createStackNavigator использовался в предыдущих версиях React Navigation.
Теперь навигатор знает о ваших двух экранах.
Добавление кнопок на главный экран и экран друзей
Наконец, добавьте кнопки, чтобы перемещаться между двумя экранами.
В 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.
Шаг 4 — Использование контекста для передачи данных на другие экраны
На этом шаге вы создадите массив возможных друзей — Алиса, Боб и Сэмми — и пустой массив текущих друзей. Вы также создадите функциональность, позволяющую пользователю добавлять возможных друзей к своим текущим друзьям.
Откройте App.js:
- nano App.js
Добавьте possibleFriends и currentFriends в состояние компонента:
// ...
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
possibleFriends: [
'Alice',
'Bob',
'Sammy',
],
currentFriends: [],
}
}
// ...
}
// ...
Затем добавьте функцию для перемещения возможного друга в список текущих друзей:
// ...
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
possibleFriends: [
'Alice',
'Bob',
'Sammy',
],
currentFriends: [],
}
}
addFriend = (index) => {
const {
currentFriends,
possibleFriends,
} = this.state
// Pull friend out of possibleFriends
const addedFriend = possibleFriends.splice(index, 1)
// And put friend in currentFriends
currentFriends.push(addedFriend)
// Finally, update the app state
this.setState({
currentFriends,
possibleFriends,
})
}
// ...
}
// ...
На этом вы закончили создание функциональности для добавления друзей.
Добавление FriendsContext в приложение
Теперь вы можете добавлять друзей в App.js, но вы захотите добавить их в FriendsScreen.js и отобразить их в HomeScreen.js. . Поскольку этот проект построен с использованием React, вы можете внедрить эту функциональность на свои экраны с помощью контекста.
Примечание. В предыдущих версиях React Navigation можно было использовать screenProps для обмена данными между экранами. В текущей версии React Navigation рекомендуется использовать React Context для обмена данными между экранами.
Чтобы избежать циклической ссылки, вам понадобится новый файл 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.
Теперь вы можете работать над ссылкой на контекст на ваших экранах.
Добавление FriendsContext на главный экран
На этом шаге вы настроите приложение для отображения текущего количества друзей.
Откройте 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, вы увидите сообщение: У вас 0 друзей!.
Добавление FriendsContext в FriendsScreen
На этом этапе вы настроите приложение для отображения возможных друзей и предоставления кнопок для добавления их в список текущих друзей.
Затем откройте 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, вы увидите, что количество друзей увеличилось.
Теперь вы можете перемещаться между экранами и обмениваться данными между ними.
Заключение
В этом руководстве вы создали образец приложения React Native с несколькими экранами. Используя React Navigation, вы разработали способ навигации между экранами. Используя React Context, вы разработали способ обмена данными между экранами.
Полный исходный код этого руководства доступен на GitHub.
Если вы хотите глубже изучить React Navigation, ознакомьтесь с их документацией.
React Navigation — не единственное решение для маршрутизации и навигации. Существует также React Router Native.
Если вы хотите узнать больше о React, загляните на нашу страницу темы React с упражнениями и проектами по программированию.