Здесь разработчик JavaScript живет в мире мобильной разработки с React Native. Я работал над многими проектами React Native (почти в стадии производства и разработки), и в каждом из них мне приходилось копаться в коде, специфичном для платформы. На самом деле не слишком грязно, просто немного пыли. Поскольку в конечном итоге я работаю даже немного с машинным кодом, я всегда начинаю свои проекты с react-native init AwesomeProject вместо create-react-native-app AwesomeProject. Если вы используете create-react-native-app, вы не сможете использовать следующую информацию, если не решите удалить свое приложение React Native. Подробнее об этом здесь.
Зачем вам создавать заставку в Xcode и не использовать их каталог активов? Есть несколько причин. Может быть, вы не хотите заниматься экспортом всех этих изображений размера экрана, а затем выходит новое устройство, заставляющее вас переделывать / добавлять новые размеры для следующего выпуска. Может быть, вы хотите добавить какой-то спецэффект с помощью нативного кода. Я узнал об этом, потому что планировал создать анимацию и хотел попрактиковаться в представлениях iOS. На самом деле анимация была заменена на отсутствие анимации, но, тем не менее, я узнал об этом, и теперь я лучше знаком с Xcode, так что это победа для меня.
Сказав все это, если вы хотите пойти по пути каталога активов, это совершенно круто. Спенсер Карли (замечательный блогер на React Native) написал отличную статью о добавлении заставок с помощью каталога ресурсов в iOS (и он включает инструкции для Android - бонус).
С чего мы начинаем
Когда вы впервые запускаете проект в React Native, вы получите этот прекрасный экран-заставку, который будет приветствовать вас при первом запуске.
Хорошая новость в том, что они уже настроили для нас LaunchScreen.xib, который мы будем использовать для нашей собственной фирменной заставки.
Куда мы идем
Вот куда мы идем (кружок и буквы обозначают любое изображение логотипа, которое вы планируете показать).
Просмотр экрана в Xcode
Давайте посмотрим в Xcode на то, что у нас есть. Откройте подкаталоги из основного каталога проекта слева, а затем верхний обычно называется так же, как имя вашего проекта. Откройте и его и нажмите LaunchScreen.xib. Это откроет что-то похожее на это справа.
Первое, что я замечаю, это квадрат, который не похож ни на одно из устройств, для которых я разрабатываю. Мне нравится менять вид, чтобы все проверить на разных устройствах.
Убедитесь, что на левой панели выделено View. На правой боковой панели нажмите маленькую кнопку с пиктограммой в самом верху, четвертую слева (при наведении курсора появится надпись «Показать инспектор атрибутов»). Измените первый раскрывающийся список с «Произвольная форма» на «Лист страницы». Я также собираюсь установить здесь свой цвет фона, щелкнув раскрывающийся список рядом с «Фон» и выбрав свой цвет. Вот наглядное изображение: слева - это то место, где мы начали, справа - это то место, где вы должны быть сейчас (с любым выбранным вами цветом фона).
Прохладный! Теперь мы можем просматривать наш экран-заставку на различных устройствах, щелкнув любое из них на нижней панели.
Удалить исходный текст React
В заставке React Native по умолчанию используется только текст, так что давайте избавимся от этого. Просто нажимайте на каждый элемент под View на левой панели, на котором есть текстовый символ (это L из того, что я видел), и используйте клавишу delete на клавиатуре.
Итак, теперь у нас остался пустой экран с выбранным нами цветом фона. Добавим наш логотип.
Добавить представление изображения в LaunchScreen.xib
Выбрав View на левой панели, перейдите в нижнюю часть правой панели, где вы увидите этот маленький квадрат действий, и щелкните третий значок слева (круг с квадратом в центре).
Прокрутите вниз, пока не увидите параметр «Просмотр изображения». Щелкните, перетащите это на экран.
Добавить файл изображения в Xcode
Отлично, теперь нам нужно добавить наше изображение. Если вы вернетесь в каталог своего проекта и нажмете Images.xcassets, вы можете увидеть что-то вроде AppIcon справа от списка каталогов. Мы собираемся добавить наше изображение в этот каталог. Внизу этой панели есть маленькая кнопка «+». Щелкните по нему и выберите Import.... Откроется диалоговое окно, в котором вы сможете найти и выбрать изображение, которое хотите использовать.
Теперь под AppIcon вы увидите имя файла изображения. Это имя мы будем использовать для ссылки в нашем LaunchScreen.xib. Поэтому убедитесь, что вы скопировали имя именно так, как здесь.
Ссылка на свое изображение для использования в LaunchScreen.xib
Теперь вернемся к нашему LaunchScreen.xib файлу и выберем представление изображения на левой панели. Переключитесь на правую панель, где у вас выбран четвертый слева значок, и вы увидите первое раскрывающееся меню с надписью Image. Щелкните там и введите свое имя изображения точно так, как вы его сохранили (сверху). Вы не будете включать расширение (.jpg, .png). При первом добавлении изображение, скорее всего, будет немного искажено. Ничего страшного, мы это исправим. Вот где я сейчас.
Чтобы исправить это соотношение сторон, перейдите в раздел View на правой панели, выберите Content Mode раскрывающийся список и выберите Aspect Fit. Ура, намного лучше!
Я хочу, чтобы мой был прямо посередине, поэтому я возьму его и потащу вниз, пока поперечные полосы не покажут мне, что я в центре. Хорошо выглядеть! Но у нас есть проблема. Когда я переключаюсь в режим просмотра iPad…
Исправить соотношение сторон
Снова перейдите к выбору значков на правой панели и щелкните следующий справа (выглядит как вертикальная линейка). Перейдите в раздел Autoresizing, и вы можете щелкнуть маленькие красные линии со стрелками сбоку, чтобы указать правильное расположение вашего логотипа. Поиграйте, чтобы получить то, что вы хотите, или, если вы хотите, чтобы в центре был одинаковый логотип на каждом устройстве, снимите выделение с тех, которые выделены, а затем убедитесь, что выделены только два в меньшем центральном поле, как показано ниже.
Теперь, если мы посмотрим на iPad и другие размеры экрана…
Ура! Все вокруг хорошо выглядят. Итак, теперь у вас есть экран запуска с использованием файла LaunchScreen.xib. Таким образом, вам не нужно менять источник экрана запуска. Вы можете пойти дальше, перепаковать и повторно запустить приложение React Native и на секунду увидеть свой новый красивый экран-заставку во всей его красе.
Надеюсь, это было чем-то полезно для вас - спасибо за чтение!
Если вам понравилось, пожалуйста, оцените аплодисментами. :)
И оставляйте комментарии ниже с любыми советами, отзывами или общими мыслями. Я всегда готов узнавать что-то новое и слышать советы других (принимаю я их или нет ;-)). ❤
