Настройка бортовых экранов в React Native
Онбординговые экраны — очень эффективный способ узнать, как использовать приложение, факты о приложении, а некоторые функции приложения можно наглядно продемонстрировать новым пользователям. Это возможно, поскольку это первый экран, с которым пользователь взаимодействует сразу после установки и открытия приложения.
Ожидается, что после первоначального запуска приложения экраны регистрации не появятся. В этом уроке я покажу вам, как настроить входящие экраны для приложений Android и iOS в React Native.
Полный исходный код этого руководства доступен на Github. Чтобы следовать этому руководству, необходимы базовые знания React Native, и на вашем компьютере должен быть установлен React Native. Также необходимо настроить симулятор Android и iOS для тестирования приложения.
Клонировать простое приложение
Вы должны отправиться на Github и клонировать демонстрационный проект. Это приложение я буду использовать для этого урока. Я настроил React Navigation для навигации по приложению. Для получения дополнительной информации и того, как начать работу с React Navigation, нажмите здесь. Вы также можете увидеть, как использовать React Navigation в своих проектах, нажав здесь.
После того, как вы клонировали проект, вы должны открыть его в своем редакторе кода, а в терминале вы должны выполнить приведенные ниже команды, которые установят модули узла для проекта и настроят приложение для iOS.
установка нпм
#Настройка iOS
cd ios && pod install
#Вернитесь в основную папку
cd ..
После завершения этого процесса вы должны создать приложение на своих эмуляторах Android и iOS, используя приведенный ниже код.
#Сборка на Android
npx react-native run-android
# Сборка на iOS
npx react-native run-ios
Ваше приложение должно отображаться следующим образом:
Настройка бортовых экранов
Теперь я перейду к установке библиотеки, которую буду использовать для демонстрации реализации экранов адаптации в вашем проекте React Native.
Конкретная библиотека, которую я буду использовать, — это React Native Onboarding Swiper. Эта библиотека React Native довольно надежна и настраиваема. Чтобы двигаться вперед, вы должны установить библиотеку, используя команду ниже.
npm i react-native-onboarding-swiper
cd ios && pod install
После установки библиотеки важно запустить pod install для загрузки необходимых файлов для правильной работы iOS.
Как только вы установите библиотеку, вы должны создать свои приложения для Android и iOS, используя вышеупомянутую команду. Это также очень важный шаг, который поможет вам избежать ошибок, возникающих из-за того, что ваши приложения не синхронизированы с только что установленной библиотекой.
Когда ваша сборка будет завершена, откройте уже созданную папку экрана и в этой папке откройте OnboardingScreen.js. Здесь будут созданы Onboarding Swipes.
Чтобы создать Onboarding Swipes, у компонента Onboarding должны быть некоторые обязательные свойства. Компонент «страницы» — это массив, который содержит другие необходимые реквизиты, такие как backgroundColor, изображение, заголовок и подзаголовок.
Вы должны создать больше объектов в массиве pages, чтобы иметь несколько встроенных свайпов.
Создание ознакомительных свайпов
Первое, что нужно сделать, это создать папку в корневом каталоге проекта, назовите ее assets, так как именно там будут расположены изображения, которые будут добавлены на начальный экран, а затем добавьте несколько изображений в папку. Затем импортируйте React Native Onboarding Swiper в свой проект, используя приведенный ниже код.
импортировать Onboarding из «React-Native-Onboarding-Swiper»;
Это должно быть добавлено чуть ниже импорта в верхней части страницы. В функции OnboardingScreen удалите представление и верните приведенный ниже код подключения.
‹Onboarding
pages={[
{
backgroundColor: '#a6e4d0',
image: ‹Image source={require('../assets/list.png') } /›,
title: 'Добро пожаловать',
subtitle: 'Добро пожаловать на первый слайд Onboarding Swiper.',
},
]}
/ ›
У вас может не отображаться то же изображение, что и у меня, но ваши приложения должны отображаться так на Android и iOS:
Чтобы добавить больше экранов, вы должны создать больше объектов в массиве. Пример того, что я сделал, таков:
pages={[
{
backgroundColor: '#a6e4d0',
image: ‹Image source={require('../assets/list.png')} /›,
title: 'Добро пожаловать',
subtitle: 'Добро пожаловать на первый слайд Onboarding Swiper.',
},
{
backgroundColor: '#fdeb93',< br /> image: ‹Image source={require('../assets/megaphone.png')} /›,
title: 'Исследуйте',
subtitle: 'Это второй слайд Onboarding Swiper.',
},
{
backgroundColor: '#e9bcbe',
image: ‹Image source={require('../assets/like.png ')} /›,
title: 'Все готово',
subtitle: 'Это третий слайд Onboarding Swiper.',
},
После того, как вы добавите это, ваше приложение должно иметь возможность пролистывать и отображаться следующим образом:
Если вы нажмете кнопки «Пропустить» и «Готово», вы обнаружите, что они не будут выполнять никаких действий, и чтобы это исправить, вам нужно захватить реквизиты onSkip и onDone, которые вы будете использовать для перехода пользователя на первую страницу, если он нажимаются. Первая страница в этом демонстрационном приложении — домашняя; следовательно, я буду переходить на домашнюю страницу. Код должен быть добавлен в компонент адаптации.
‹Onboarding
//Для обработки перехода на главную страницу при нажатии кнопки «Пропустить»
onSkip={() =› navigation.replace(«Home»)}
//Для обработки перехода на главную страницу после нажатия кнопки "Готово"
onDone={() =› navigation.replace("Home")}
pages={[
…
]}
/›
Как только это будет добавлено, вы должны попробовать нажать «Пропустить и готово», что приведет вас на домашнюю страницу.
Вы можете дополнительно настроить эти свайпы, используя реквизиты, указанные здесь. Сейчас я сделаю небольшую настройку, например, использую текст вместо значка для кнопки «Готово». Затем я изменю способ отображения индикаторов смахивания.
Начиная с Готово, вы должны включить TouchableOpacity в качестве импорта из React Native; затем создайте функцию Done, которая будет назначена реквизиту DoneButtonComponent в компоненте Onboarding. См. код ниже:
const Done = ({…props}) =› (
‹TouchableOpacity
{…props}
›
‹Стиль текста={{fontSize:16, marginHorizontal:20}} ›Готово‹/Текст›
‹/TouchableOpacity›
)
Теперь внутри компонента Onboarding включите приведенный ниже код, чтобы назначить только что созданную функцию Done для файла DoneButtonComponent. Теперь кнопка «Готово» будет отображаться в виде текста, а не значка.
‹Подключение
…
DoneButtonComponent={Done}
pages=[{
…
]}
/›
Теперь кнопка «Готово» будет отображаться в виде текста, а не значка. Ваши приложения должны отображаться следующим образом:
Следующее, что я настрою в этом уроке, — это индикатор экрана загрузки. Для этого я создам еще одну функцию. Эта функция Dot преобразует квадратные индикаторы в прямоугольные индикаторы и делает выбранный слайд синим, а другие стороны черными.
const Dots = ({selected}) =› {
let backgroundColor;
backgroundColor = selected ? 'blue' : 'black'
return (
‹View
style={{
width:24,
height:6,
marginHorizontal:3 ,
backgroundColor
}}
/›
)
}
Этот код должен отображать ваше приложение следующим образом:
Повтор сеанса с открытым исходным кодом
OpenReplay – это пакет для воспроизведения сеансов с открытым исходным кодом, который позволяет вам видеть, что пользователи делают в вашем веб-приложении, помогая вам быстрее устранять неполадки. OpenReplay размещается на собственном сервере для полного контроля над вашими данными.
Начните получать удовольствие от отладки — начните использовать OpenReplay бесплатно.
Создание пользовательского потока
Экран адаптации, который вы только что настроили в соответствии с руководством, всегда будет отображаться первым, как только ваше приложение будет открыто, и это не то, как должен работать экран регистрации.
При создании пользовательского потока вы хотите настроить вводный экран так, чтобы он появлялся только при первой установке вашего приложения, и это то, что я покажу вам сейчас.
Как это будет работать, так это то, что когда пользователь устанавливает или открывает ваше приложение в первый раз, приложение показывает пользователю экран адаптации, и как только пользователь взаимодействует с экранами адаптации, приложение сохраняет строковые данные на устройство. Приложение всегда будет проверять этот код; если код существует, вводный экран отображаться не будет; следовательно, пользователь попадет прямо на домашнюю страницу. Если приложение открывается в первый раз, кода не будет; поэтому будет отображаться экран загрузки.
Чтобы приложение сохраняло строковые данные из приложения, я буду использовать AsyncStorage. Этот пакет помогает хранить файлы и делает их доступными в автономном режиме. Узнать больше о AsyncStorage можно здесь.
Вам следует установить React Native AsyncStorage и пересобрать приложение для Android и iOS. Код для этого приведен ниже:
npm i @react-native-async-storage/async-storage
cd ios && pod install
После установки пересоберите приложение для Android и iOS с помощью команды, указанной ранее в этой статье.
Как только это будет сделано, откройте файл app.js. В app.js вы должны импортировать AsyncStorage вверху страницы с кодом ниже.
импортировать AsyncStorage из @react-native-async-storage/async-storage;
Я создам переменную состояния для первого запуска приложения и функцию для обновления первого запуска с помощью хука React useState. После этого с помощью React useEffect Hook я создам асинхронную функцию, которая будет проверять строковый элемент appLaunched в AsyncStorage при каждом открытии приложения. Если строковый элемент имеет значение null, приложение открывается в первый раз; функция setFirstLaunch обновит firstLaunch до true, и отобразится экран загрузки.
С другой стороны, если строковый элемент appLaunched найден в AsyncStorage, то функция setFirstLaunch обновит состояние firstLaunch до false, и экран загрузки не будет отображаться; вместо этого пользователь будет направлен прямо на домашнюю страницу. Код ниже.
const App = () =› {
const [firstLaunch, setFirstLaunch] = React.useState(null);
React.useEffect(() =› {
асинхронная функция setData() {< br /> const appData = await AsyncStorage.getItem("appLaunched");
if (appData == null) {
setFirstLaunch(true);
AsyncStorage.setItem("appLaunched", " false”);
} else {
setFirstLaunch(false);
}
}
setData();
}, []);
возврат…
};
Обратите внимание, что мне пришлось создать функцию внутри блока useEffect, потому что процесс должен работать асинхронно, следовательно, нужна асинхронная функция. Однако асинхронная функция вызывается непосредственно внутри блока useEffect, чтобы выполнить указанное действие.
Последний процесс, который вы должны сделать, — настроить навигацию приложения для отображения экрана регистрации, если состояние firstLaunch истинно, а если состояние firstLaunch ложно, оно должно направить пользователя на домашнюю страницу. Код ниже.
return (
firstLaunch != null && (
‹NavigationContainer›
‹Stack.Navigator›
{firstLaunch && (
‹Stack.Screen
options= {{ headerShown: false }}
name="Onboarding"
component={OnboardingScreen}
/›
)}
‹Stack.Screen name="Home" component={HomeScreen} /›
‹/Stack.Navigator›
‹/NavigationContainer›
)
);
После обновления блока возврата до указанного выше, вы должны протестировать приложение. Ваше приложение должно отображать экран подключения, и если вы нажмете кнопки «Пропустить» или «Готово», вы не увидите экран подключения при повторном запуске приложения на Android и iOS.
Вам следует очистить данные приложения в эмуляторе Android и удалить приложение из симулятора iOS, а затем перестроить приложение с помощью npx react-native run-ios и npx react-native run-android. Вы должны увидеть начальные экраны один раз; после этого он больше не должен появляться.
Заключение
Экраны адаптации, которые являются очень эффективным и интересным способом информирования новых пользователей о ключевых способах использования вашего приложения, не должны быть упущены в процессе разработки. Я смог проиллюстрировать, насколько это возможно и просто реализовать в вашем приложении React Native, и я надеюсь, что то, чем я здесь поделился, поможет вам. Пожалуйста, свяжитесь с нами, если вы столкнетесь с какими-либо проблемами; Я буду очень рад помочь.
СОВЕТ ОТ РЕДАКТОРА. Возможно, вы захотите дополнить адаптацию голосовым текстом, как показано в нашей статье Общайтесь со своим приложением с помощью искусственного интеллекта Алана.
Первоначально опубликовано на https://blog.openreplay.com 28 августа 2022 г.
