React Navigation Выпустил свою 5 -ю стабильную версию библиотеки несколько месяцев назад. Несмотря на то, что LIB всего чуть более двух лет, это, без сомнения, одно из самых популярных навигационных решений в Native Apps React, которое также имеет поддержку Expo SDK.
Основным освещением этой новой версии выпуска является то, что маршрутизация экранов теперь основана на конфигурации компонента.
В этом уроке давайте посмотрим, как настроить и использовать шаблон навигации стека между двумя экранами, и передадим данные с одного экрана на другой. Данные будут извлечены из стороннего API с использованием языка запросов GraphQL. Это возможно, используя Аполлон Клиент , что позволяет нам получить результаты из конечной точки отдыха.
Предварительные условия
Чтобы следовать этому уроку, убедитесь, что у вас установлено следующее в вашей местной среде Dev:
- Node.js Версия> =
12.x.xустановлены - JavaScript/ES6 Основы
- Иметь доступ к одному диспетчера пакетов, такому как NPM или пряжа
- Expo-Cli Версия установлена или используйте NPX
Продемонстрированный пример основан на Expo SDK 38.
Установить зависимости
Для начала генерируйте новый проект выставки с пусто Шаблон, выполнив следующую команду в окне терминала:
npx expo init [Project Name] # after the project directory has been generated cd [Project Name]
Затем установите зависимости ниже для React-Navigation библиотека для работы. Первая команда собирается установить основные пакеты Реакция навигации . Эти основные пакеты используются навигаторами для создания структуры навигации в приложении.
Вторая команда использует Экспо установка вместо NPM Установка или пряжа добавить Анкет Причина в том, что Expo собирается установить версию упомянутых библиотек, которые совместимы с Expo SDK. Эта вторая команда устанавливает зависимости от сверстников, которые React-Navigation Библиотека зависит от.
yarn add @react-navigation/native @react-navigation/stack # use expo install for Expo projects only expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
Обратите внимание, что пакет @React-Navigation/Stack требуется установка только тогда, когда вы собираетесь использовать шаблон навигации стека в приложении. Например, если вы просто собираетесь использовать навигацию вкладок, вы собираетесь установить другой пакет, как показано Здесь Анкет
Что такое навигатор стека?
Паттерн навигации стека позволяет переходить от одного экрана приложения на другое, когда управляет историей навигации. Если в приложении используется только один навигатор стека, то это концептуально похоже на то, как веб -браузер обрабатывает состояние навигации. Приложение выталкивает и всплывает экраны из навигационного стека, когда пользователи взаимодействуют с ним, и это приводит к тому, что пользователь видит разные экраны.
Начните с создания нового каталога SRC/Navigation/ И внутри он создает новый файл с именем Mainstacknavigator.js со следующими импортными заявлениями.
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
Из приведенного выше фрагмента, NavigationContainer это компонент, который управляет деревом навигации. Он содержит состояние навигации, и он должен обернуть структуру всех навигаторов.
Createstacknavigator это функция, которая используется для реализации шаблона навигации стека. Эта функция возвращает два компонента React: Экран а также Навигатор Это помогает настроить каждый экран компонента.
Поскольку в приложении пока нет каких -либо компонентов экрана, в следующем разделе позвольте нам создать оба экрана, которые приложению требуют, используя некоторые фиктивные данные для отображения.
Создайте экраны приложений
Начните с создания двух файлов компонентов экрана с именем Home.js и Детали.js Внутри каталога src/экраны/ со следующими фрагментами кода:
// src/screens/Home.js
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
export default function Home() {
return (
Home Screen
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ebebeb'
},
text: {
color: '#333',
fontSize: 24,
fontWeight: 'bold'
}
});
// src/screens/Details.js
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
export default function Details() {
return (
Details Screen
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ebebeb'
},
text: {
color: '#333',
fontSize: 24,
fontWeight: 'bold'
}
});
Навигатор стека нуждается в компонентах экрана в качестве маршрутов. Эти маршруты доступны в виде компонентов экрана. Импортируйте эти два компонента экрана внутри Mainstacknavigator.js Файл, а затем создайте функцию навигатора стека.
// other import statements
import Home from '../screens/Home';
import Details from '../screens/Details';
const Stack = createStackNavigator();
function MainStackNavigator() {
return (
);
}
export default MainStackNavigator;
В приведенном выше фрагменте есть два необходимого реквизита с каждым Куча. Экран Анкет Имя предложения относится к имя маршрута и опоры компонент Указывает, какой экран отображается на конкретном маршруте. Порядок экранов имеет значение, так как первый экран, определенный в шаблоне навигатора стека, будет нижней частью стека.
Импортировать этот навигатор внутри App.js составная часть.
import React from 'react';
import MainStackNavigator from './src/navigation/MainStackNavigator';
export default function App() {
return Чтобы проверить, работает ли конфигурация, запустите сервер разработки с Expo Start а затем откройте приложение на реальном устройстве или в симуляторе, как показано ниже.
Указание параметров для каждого экрана в Stack Navigator
По умолчанию заголовок, показанный на каждом экране, совпадает с значением, предоставленным в имя Атрибут для каждого компонента экрана в навигаторе стека. Тем не менее, вы можете установить заголовок экрана. Давайте изменим заголовок показанного экрана, с «дома» на «Список крипто -факторов».
Это делается путем указания параметров на каждом экране, как показано ниже. Откройте Mainstacknavigator.js Файл и параметры поддержки на Куча. Экран для Главная составная часть.
Изменения мгновенно отражаются в Expo Client.
Навигация между двумя экранами
Open экраны/home.js и добавить компонент кнопки, который собирается перемещаться из Главная Компонент экрана к Детали экран при нажатии.
Импорт TouchablePacity от реагируемый и обязательно используйте навигация Опора передана Главная экран. Эта опора передается каждому экрану, который является маршрутом, обернутым текущим навигатором стека в приложении.
import React from 'react';
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
export default function Home({ navigation }) {
return (
Home Screen
navigation.navigate('Details')}
>
Go to Detail Screen
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ebebeb'
},
text: {
color: '#333',
fontSize: 24,
fontWeight: 'bold'
},
buttonContainer: {
backgroundColor: '#222',
borderRadius: 5,
padding: 10,
margin: 20
},
buttonText: {
fontSize: 20,
color: '#fff'
}
});
Вот выход, который вы получите после этого шага:
Когда пользователь нажимает кнопку на главном экране, навигатор направит пользователя на Детали экран.
Использование параметров экрана для изменения заголовка
Вы можете использовать ScreenOptions Опора для применения общих стилей к заголовку через навигатор. Например, в приведенном ниже фрагменте кода давайте установим свойства, HeadersTyle , HeadertIntColor и Headertitlestyle Чтобы изменить цвет фона всех заголовков экрана, а также цвет заголовка на каждом экране.
HeadersTyleэто объект стиля, который можно использовать для установки цвета фона заголовка для компонента экрана;Headertitlestyleэто еще один объект стиля, который позволяет настроить заголовок или текст заголовка;HeadertIntColorэто цветное свойство как для кнопки, так и для заголовка заголовка.
Откройте src/navigation/mainstacknavigator.js Файл, чтобы внести эти изменения.
Вот выход:
Благодаря основной конфигурации работы навигатора стека, давайте теперь возьмем данные из стороннего API с использованием клиента Apollo в следующем разделе.
Установите зависимости Apollo
Давайте установим все необходимые зависимости для интеграции клиента Apollo и запросить конечную точку REST, используя запросы GraphQL:
yarn add apollo-client apollo-cache-inmemory graphql-tag apollo-link-rest apollo-link graphql graphql-anywhere qs @apollo/react-hooks
Настройте клиент Apollo в Rayact Native
В этом разделе давайте интегрируем клиент Apollo, чтобы мы могли получить данные из конечной точки REST. Начните с создания нового каталога src/graphql И внутри него также создайте новый файл Client.js Анкет
Аполлон-клиент Пакет вместе с Apollo-Cache-Inmemory и Apollo-Link это полностью сфальсифицированный клиент GraphQL, который может быть интегрирован в React или React Native Apps. Позвольте нам импортировать все три из них в этом файле:
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { RestLink } from 'apollo-link-rest';
Для демонстрационных целей конечная точка API будет использоваться в качестве конечной точки REST из Cryptocompare.com . Убедитесь, что на данный момент у вас есть доступ к ключу API (который бесплатен на момент написания этого учебника). Их API предлагает много конечных точек для различных вариантов использования, но мы собираемся получить несколько лучших монет по общему объему на всех рынках за последние 24 часа.
Добавить RESTLINK Для остальной конечной точки API и Pass Заголовки , который является объектом, представляющим значения, которые должны быть отправлены в качестве заголовков по запросу:
const restLink = new RestLink({
uri: 'https://min-api.cryptocompare.com',
headers: {
Authorization:
'd251970548f7321b548d3fb61d58c1a456974ea02ba41437fc9bf711f4e89782'
}
});
Добавьте следующую конфигурацию с кешем по умолчанию и RESTLINK Чтобы завершить конфигурацию клиента Apollo:
export const client = new ApolloClient({
link: restLink,
cache: new InMemoryCache()
});
Теперь откройте App.js Файл, чтобы обернуть текущий навигатор стека с Apolloprovider Анкет Этот провайдер похож на React’s Контекст Поставщик и помещает клиента Аполлона в контекст. Это делает их доступными для клиента Apollo легко и из любой точки дерева компонентов.
import React from 'react';
import MainStackNavigator from './src/navigation/MainStackNavigator';
import { ApolloProvider } from '@apollo/react-hooks';
import { client } from './src/graphql/Client';
export default function App() {
return;
;
}
Написание вашего первого запроса GraphQL
В этом разделе давайте напишем запрос, чтобы подключить клиента Apollo, чтобы получить результаты из конечной точки API REST. Тем не менее, запрос будет сделан на языке запросов GraphQL с помощью graphql-tag Анкет
В src/graphql/ каталог, создайте новый файл с именем Queries.js и импорт graphql-tag Анкет Затем создайте запрос для получения данных. Этот запрос называется Fetch_coin_list и определяется с использованием шаблона из GQL ярлык. Используя @Rest Директива, Аполлон управляет анализом запроса с конечной точки REST до API GraphQL.
import gql from 'graphql-tag';
export const FETCH_COIN_LIST = gql`
query FetchCoinsList {
coinsList
@rest(type: "ListPayload", path: "/data/top/totalvolfull?tsym=USD") {
Data @type(name: "DataPayload") {
CoinInfo @type(name: "CoinInfoPayload") {
Id
Name
FullName
}
DISPLAY @type(name: "DisplayPayload") {
USD @type(name: "USDPayLoad") {
PRICE
OPENDAY
HIGHDAY
LOWDAY
OPEN24HOUR
}
}
}
}
}
`;
Сделайте запрос, чтобы остановить конечную точку с клиентом Apollo
Откройте файл экраны/home.js и импортировать Fetch_coin_list запрос, а также usequery крючок от @Apollo/React-Hooks Анкет
React Hook Использовать используется ниже, чтобы проверить, что конечная точка получает данные в соответствии с нашими потребностями. Извлеченные данные будут отображаться в консоли.
Крюк useQuery используется для запроса конечной точки API, ссылаясь на запрос Fetch_coin_list . После того, как его вызвали, он возвращает объект результата с набором свойств. Нам нужны только два свойства на данный момент: загрузка и данные. DE-структура этот крючок запроса внутри Главная компонент, как показано ниже.
import React, { useEffect } from 'react';
import { useQuery } from '@apollo/react-hooks';
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
import { FETCH_COIN_LIST } from '../graphql/Queries';
export default function Home({ navigation }) {
const { loading, data } = useQuery(FETCH_COIN_LIST);
useEffect(() => {
console.log(data);
}, []);
return (
Home Screen
);
}
// ... rest remains same
Sidenote: Не забывайте, что вы всегда должны защищать свой исходный код в коммерческих и корпоративных приложениях, чтобы предотвратить вмешательство. Для получения более подробной информации следуйте это руководство Анкет
Чтобы увидеть результат, убедитесь, что Expo Start Команда работает из окна терминала. Затем перейдите в Expo Client либо на реальном устройстве, либо на симулятор, и откройте меню разработчика на Mac, используя:
- Если на симуляторе iOS, нажмите
CTRL-CMD-Z - Если на эмуляторе Android, нажмите
CMD+M. - При использовании настоящего устройства просто немного встряхните устройство
Это то, на что выглядит меню разработчика в Expo Client:
Выберите опцию Отладка удаленного JS Анкет Отладчик, как ниже, должен появиться в вашем веб -браузере по умолчанию.
Откройте Консоль Вкладка из Инструменты разработчика веб -браузера. Вы получите следующий результат.
Вот и все! Интеграция Apollo работает, и вы можете начать отображать данные в приложении.
Добавить индикатор активности при получении результатов
useQuery Крюк дает одно свойство, называемое «загрузкой», которое можно использовать для указания на экране устройства, когда запрос находится в процессе получения результата. Используя ActivityIndicator может отображаться индикатор загрузки.
Импортировать ActivityIndicator компонент из реагируемый в Home.js Анкет
export default function Home({ navigation }) {
const { loading, data } = useQuery(FETCH_COIN_LIST);
if (loading && !data) {
return (
);
}
return (
Coins List
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#333',
justifyContent: 'center',
alignItems: 'center'
},
boldText: {
color: '#fff',
fontSize: 24,
fontWeight: 'bold'
},
loadingIndicatorContainer: {
flex: 1,
backgroundColor: '#333',
justifyContent: 'center',
alignItems: 'center'
}
});
Отображать данные в списке, используя flatlist
Чтобы отобразить список элементов, позвольте нам создать отдельный компонент, который можно использовать повторно для другой цели, если объем этого приложения станет больше. Создайте новый каталог под названием SRC/Компоненты И внутри он поместите новый файл Listitem.js .
Этот компонент будет отображать имя, полное имя и цену компонента, все внутри охваченной кнопки, которая будет перемещаться в Подробности экран, который вы создали ранее.
С некоторой деструктуризацией из входящей монеты реквизита ( , которая будет передана из Home.js ), добавьте функциональный компонент с именем ListItem Анкет
import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
export default function ListItem(props) {
const { coin, onPress } = props;
const { CoinInfo, DISPLAY } = coin;
const { FullName, Name } = CoinInfo;
return (
onPress && onPress(coin)}
>
{Name}
{DISPLAY.USD.PRICE}
{FullName}
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20
},
active: {
backgroundColor: 'rgba(255,255,255,0.05)'
},
row: {
flexDirection: 'row',
justifyContent: 'space-between'
},
right: {
flex: 1,
alignSelf: 'flex-end',
alignItems: 'flex-end'
},
text: {
color: '#FFFFFF',
fontSize: 24,
fontWeight: '500'
},
name: {
color: 'rgba(255,255,255,0.5)',
fontSize: 16,
fontWeight: '300'
}
});
Теперь импортируйте этот компонент в Home.js файл. Также импорт Flatlist от Реактивно-родная основной.
// ...
import {
StyleSheet,
View,
Text,
FlatList,
ActivityIndicator
} from 'react-native';
import ListItem from '../components/ListItem';
//...
Далее добавьте это Flatlist Компонент, завернутый внутри корня Просмотр компонент, как ниже.
item.CoinInfo.Id.toString()} renderItem={({ item }) => { return ( navigation.navigate('Details', { coin: item })} /> ); }} />
Вот выход после этого шага:
Вы также увидите начальный экран загрузки.
Передача данных между двумя экранами
Поскольку все реквизиты передаются из Главная к Детали Экран и шаблон навигации работают, давайте настроем Детали Экран сейчас. Однажды Route.params де-структуруется в объект, вы можете использовать значения из этого объекта, чтобы получить данные из Главная экран.
export default function Details(props) {
const { route } = props;
const { params } = route;
const { coin } = params;
const { CoinInfo, DISPLAY } = coin;
const { FullName, Name } = CoinInfo;
const { USD } = DISPLAY;
const { PRICE, OPENDAY, HIGHDAY, LOWDAY, OPEN24HOUR } = USD;
return (
{Name} - {FullName}
Price: {PRICE}
Open Day
{OPENDAY}
Highest in a day
{HIGHDAY}
Lowest in a day
{LOWDAY}
Open in 24 hours
{OPEN24HOUR}
);
}
Также добавьте соответствующие стили в этот компонент:
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff'
},
header: {
flex: 30,
justifyContent: 'center',
alignItems: 'center'
},
text: {
fontSize: 32,
color: '#161616'
},
priceText: {
fontSize: 24,
color: '#161616'
},
statsContainer: {
flex: 62,
backgroundColor: '#161616'
},
statRow: {
padding: 10,
flexDirection: 'row',
justifyContent: 'space-between'
},
stat: {
color: '#fff',
fontSize: 16,
fontWeight: '500'
}
});
При посещении деталей любой монеты в списке будет отображаться следующее.
Вывод
В этом уроке мы обсудили много стратегий и свойств, которые вы можете применять и реализовать в своем навигаторе стека. Первая цель-ознакомиться с конфигурацией на основе компонентов навигатора стека в последней версии React-Navigation библиотека.
Вторая цель также выполнена, которая состоит в том, чтобы использовать конечную точку REST и интегрировать клиент Apollo в любую конечную точку API, чтобы запросить желаемые результаты в приложение REACT и Expo и передавать данные между двумя экранами.
Наконец, не забудьте обратить особое внимание, если вы разрабатываете коммерческие нативные приложения, которые содержат конфиденциальную логику. Вы можете защитить их от кражи кода, подделки и обратной инженерии, следуя это руководство Анкет
Оригинал: “https://dev.to/jscrambler/how-to-set-up-and-use-navigators-in-react-native-13oc”