Реагировать нативно
Как изменить ориентацию экрана устройства с помощью Expo в React Native
Руководство для начинающих по управлению ориентацией экрана в React Native
В сегодняшней статье я покажу вам два разных способа управления ориентацией экрана в вашем приложении React Native. Первый способ будет использовать expo-screen-orientaitonpackage, а второй способ позволит expo обрабатывать, когда наше приложение должно быть повернуто.
Настройка проекта
Добавление шаблона приложения
Прежде чем мы начнем читать ориентацию наших устройств. Сначала нам нужно приложение для работы. Вставьте следующий шаблонный код в файл app.js:
Ваш экран должен выглядеть так:
Импорт ориентации экрана выставки
Прежде чем мы сможем начать читать ориентацию экрана нашего устройства, нам сначала нужно установить пакет expo-screen-orientaiton. Запустите следующую команду в своем терминале:
expo install expo-screen-orientationи добавьте следующий оператор импорта в начало файла app.js:
import * as ScreenOrientation from 'expo-screen-orientation'
Чтение ориентации экрана
Сохранение ориентации наших устройств
Мы будем использовать функцию getOrientaitonAsync для чтения ориентации нашего экрана. getOrientationAsync возвращает обещание, указывающее, находится ли наше устройство в альбомном или портретном режиме.
Нам понадобится способ сохранить ориентацию нашего устройства. Для этого мы будем использовать хук useState.
Импортируйте useState в начало вашего проекта:
import {useState} from 'react'
и добавьте следующий код:
const [orientationIsLandscape,setOrientation]=useState(true)
Ваш код должен выглядеть так:
На самом деле существует дваспособа ротации приложения.
Первый способ — изменить макет вручную, вызвав функцию getOrientationAsync. Этого можно добиться, создав и вызвав асинхронную функцию после нажатия кнопки.
Второй способ — позволить expo обрабатывать поворот нашего приложения, когда пользователь наклоняет свое устройство. Для этого требуется лишь небольшое изменение в файле app.json.
Я покажу вам оба пути.
Изменение ориентации с помощью getOrientationAsync
Чтобы изменить ориентацию экрана, используйте асинхронную функцию getOrientaiton, нам понадобятся две функции: функция toggleOrientation и асинхронная функция changeScreenOrientation.
Наша функция toggleOrientaiton установит состояние ориентацияIsLandscape в противоположное значение.
Если это правда, ориентацияIsLandscape станет ложной, и наоборот. Эта функция также вызовет changeScreenOrientation.
changeScreenOrientation будет тем, что на самом деле обрабатывает поворот нашего экрана.
Код для этого ниже:
и теперь мы должны добавить нашу функцию toggleOrientation в onPress нашей кнопки.
<Button title="Change Orientation" onPress={toggleOrientation} />
Теперь, как только кнопка будет нажата, наше приложение переключится с портретного режима на альбомный. Если вы снова нажмете кнопку, приложение вернется в портретный режим.
Позволить Expo управлять ориентацией экрана
Чтобы позволить expo обрабатывать изменение ориентации экрана, мы должны отредактировать файл app.json. Откройте файл app.json и удалите строку ориентация.
Теперь, если вы наклоните свое устройство, ваше приложение будет автоматически поворачиваться. Если ваше приложение не вращается, возможно, вам придется включить автоповорот в настройках вашего устройства.
Заключение
Спасибо, что добрались до конца моей статьи «Как изменить ориентацию экрана устройства с помощью Expo в React Native». Если у вас есть какие-либо вопросы, не стесняйтесь спрашивать, и я постараюсь ответить как можно скорее.
Надеюсь у тебя хороший день. Если вы новичок в Medium, вы можете присоединиться по этой ссылке здесь.
Ресурсы
Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.
