В этом руководстве является вторая часть нашей реакции APP APP. В предыдущей части мы успешно реализовали Всплеск на iOS Платформа. Эта часть – это продолжение того же учебного пособия, где мы собираемся реализовать всплеск экрана для платформы Android. Таким образом, для внедрения всплеск экрана на платформе iOS настоятельно рекомендуется пройти через первую часть этого учебника.
_ Обратите внимание, что эта учебная часть может не иметь никакой связи с первой частью учебника. Основная сущность этой части состоит в том, чтобы реализовать только экран всплеска для платформы Android. _
Как уже упоминалось в первой части, этот учебный сериал был вдохновлен Реагировать на родной шаблон Eccomerce Что помогает нам создавать динамические и мощные готовые для развертывания приложений электронной коммерции, которую любой может использовать для создания собственных запусков электронной коммерции или продавать шаблоны приложений. Эта часть следует за реализациями кодирования и дизайна от видеоуправления YouTube by Рулевые лаборатории Для всплеска экрана в Android. Видеоуправление использует старую версию реагирования нативных и необходимых плагинов. Мы собираемся использовать ту же реализацию дизайна и кодирования для заснесенного экрана, но в последней версии реагирования нативных и обязательных плагинов.
Обзор
В этой части мы собираемся реализовать экран Splash для платформы Android, используя новейшую версию RACT NATURE и плагинов. Большинство фаз в этом руководстве состоится в Android Studio, поскольку нам нужно настроить Родная часть (Android) приложения для отображения экрана всплеска. Идея состоит в том, чтобы начать с нового приложения BoaterPlate Rect. Затем мы собираемся добавить необходимые значки Splash Screen и настроить нативный каталог приложений Android в Android Studio. Наконец, мы собираемся использовать React – Nature-Splash-экран Пакет в родной части RACT, а также нативную часть Android для отображения экрана всплеска более правильно.
Итак, давайте начнем !!
Настройка приложения для котельной
На этом этапе сначала мы собираемся установить реагировать родной проект котельной. Для этого мы собираемся использовать активный CLI. Теперь, чтобы настроить проект BoaterPlate, нам нужно выполнить следующую команду в нашей нужной командной строке каталога:
react-native init splash
Это будет настроить начальный реагировать нативный проект для вас.
Теперь, если мы перейдем к App.js, мы собираемся увидеть шаблон приветствия стартера, предоставляемый последней версией реагирования на родице. Вместо того, чтобы использовать шаблон в App.js, мы собираемся упростить его, заменив существующий код по коду в следующем фрагменте кода:
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
export default class App extends Component{
render() {
return (
Welcome to React Native!
To get started, edit App.js
);
}
Как мы видим, есть некоторые стили, связанные с Вид и Текст составные части. Эти стили предоставляются в фрагменте кода ниже:
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#c9c9c9',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: '#F5FCFF',
}
});
Следовательно, используя код выше, мы собираемся получить простой экран приветствия при запуске нашего приложения в эмуляторе Android.
Обратите внимание, что шаблон экрана упрощается в этом руководстве, чтобы обеспечить лучшее моделирование и переход на экране SPLASH на экран приложения. Любой тип шаблона экрана может использоваться в соответствии с выбором разработчика.
Следовательно, если мы запустим приложение в эмуляторе Android, мы получим следующий результат:
Теперь мы перейдем к добавлению значков экрана всплеска на наше собственное применение реагирования.
Загрузка и добавление иконок экрана Splash
На этом этапе мы собираемся загрузить необходимые значки, которые мы собираемся интегрировать в наш всплеск.
Для этого нам нужно пойти к этому ссылка И скачать значки.
Мы можем видеть, что значки имеют разные размеры, чтобы соответствовать размеру экрана приложения. Теперь нам нужно скопировать эти файлы значков в обязательном каталоге проекта. Следовательно. Нам нужно перейти к каталогу «SPLASH/Android/App/Src/Main/Res» нашей папки проекта. Затем нам нужно скопировать файлы значков в соответствующие каталоги в «/res », как показано в фрагменте кода ниже:
Здесь нам нужно добавить значки в соответствии с их размерами в разные папки:
- Для маленьких, мы можем использовать icon.png
- Для среднего значка мы можем использовать icon@2x.png
- И для других большего размера мы можем использовать icon@3x.png
Наконец, нам нужно переименовать все файлы значка как « » icon.png «Во всех каталогах.
Теперь мы переходим на нативную фазу, где мы собираемся работать над «./Android/» нашей папки проекта.
Нативная фаза (конфигурации в каталоге./Андорид)
На этом этапе мы собираемся сделать конфигурации в нашем родном каталоге »./Android/’. Для этого нам нужно открыть наш «./Android» как проект в Android Studio.
Следовательно, мы увидим следующий результат в студии Android:
На скриншоте выше, мы можем увидеть значки, которые мы скопировали в папке «./res/icon/.
Рисование значка с фоном
Теперь нам нужно создать новый каталог, называемый «Drawbleab» в каталоге «/res/». Затем в каталоге «/res/drawable »нам нужно создать новый файл Drawable Resource с именем« background_splash.xml ». Этот экран «background_splash» позволит нам нарисовать всплеск экрана для нашего приложения. После того, как мы создадим файл, мы получим следующий результат:
Здесь мы видим, что у нас нет предварительного просмотра в разделе предварительного просмотра на правой стороне скриншота. Нам нужно показать предварительный просмотр секции значка в разделе предварительного просмотра. Для этого нам нужно использовать код в следующем фрагменте кода в файле «background_splash.xml»:
Здесь мы рисуем родной Android Предмет компонент с ширина , Высота , Значок и Выравнивание Центр для нашего всплеска экрана. Мы видим, что мы также включаем цвет для нашего фона, но еще не реализовали его, что покажет ошибку в нашей андроидной студии.
Теперь, чтобы решить это, нам нужно создать новый загрузочный файл ресурсов с именем «COLORCES.XML» в каталоге «./Res/values». Затем нам нужно добавить следующий код в файл «Colors.xml», чтобы определить цвета для нашего фона экрана всплеска:
#c9c9c9 #c9c9c9
Здесь мы добавили светлый зеленый цвет кода для цвет компонент с Имя Как зеленый, а также тот же цвет называется первичным темным. Это будет использоваться в файле background_splash.xml, а также другие файлы, чтобы придать цветные свойства в наш всплеск.
Следовательно, мы получим следующий результат в разделе предварительного просмотра «background_splash.xml» файла Android-студии:
Как мы видим, у нас есть цвет фона, а также значок в разделе предварительного просмотра.
Настройка стилей и файла AndroidManifest.xml
Здесь мы собираемся настроить некоторые стили для нашей родной фазы. Для этого нам нужно необходимо скопировать код из следующего фрагмента кода в файл «./Values/Styles.xml»:
Здесь мы создаем базовый Стиль назван Приложение в наше родное приложение. Тогда мы добавили дополнительные Стиль назван SplashThemeeme С background_splash и цветной собственностью.
Теперь нам нужно сделать некоторую конфигурацию в нашем файле AndroidManifest.xml.
Настройка файла AndroidManifest.xml
Здесь нам нужно открыть файл androidmanifest.xml из каталога ‘./android/app/src/main’. Этот файл содержит основную активность для нашей собственной фазы приложения. Теперь нам нужно добавить дополнительные Деятельность назван Splashactivity с SplashThemeeme Тема и Интересный фильтр до МАКТИВНОСТЬ Как показано в фрагменте кода ниже:
Здесь мы добавили Splashactivity Но мы еще не реализовали его. Так что теперь нам нужно реализовать Splashactivity Отказ
Создание класса Splashactivity
Для того, чтобы создать Splashactivity Класс, нам нужно создать новый файл класса в папке «./app/java/com.splash» с именем «SPLASHACTIVE.java», как показано на скриншоте ниже:
Теперь нам нужно добавить следующий код в файл splashactivity.java, чтобы показать активность экрана всплеска в приложении при запуске:
package com.splash;
import android.content.Intent;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
public class SplashActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Intent intent = new Intent(this, MainActivity.class);
startActivity(intent);
finish();
}
}
Здесь мы создали деятельность по имени Splashactivity который будет работать до МАКТИВНОСТЬ Когда натуральная часть нашего собственного приложения RACT работает в эмуляторе.
Теперь, чтобы проверить, если экран Splash работает в эмуляторе, нам нужно повторно запустить эмулятор Android. Затем мы получим следующий результат в нашем экране эмулятора:
Как видно, экран всплеска с значком корзины отображается до появления экрана приложения. Следовательно, мы успешно отображали всплеск экрана в нашем приложении.
Но, а Белый экран появляется между переходом с экрана выплеска к экрану приложения Отказ Мы видим, что в стимуляции эмулятора выше. Эта проблема имеет место, потому что между приложением Android есть разрыв, работающий с помощью экрана SPLASH и запуском нативного приложения RACT.
Мы должны справиться с этим вопросом. Для этого нам нужно разрешить разрыв между бегом родной части и реагировать на родную часть. Один из способов – отобразить экран SPLASH до тех пор, пока в приложении не работает. Итак, мы собираемся реализовать это сейчас.
Разрешение пробела белого экрана
На этом этапе мы собираемся закрыть внешний вид белого экрана между экраном Splash и экраном приложения. Мы собираемся сделать это, отображая экран всплеска до тех пор, пока в приложении не работает экран RegiC.
Для этого нам нужно включить пакет, известный как React – Nature-Splash-экран Отказ Пакет AGENASH-SPRASH-SPRASH-экрана предоставляет нам API экрана всплесками для реагирования, который может программно скрыть и показать всплеск экрана. Этот пакет работает как на iOS, так и на Android. Вся конфигурация для собственной части реагирования, а также в документации предоставляется в документации. Теперь, чтобы установить этот пакет в наш реагированный нативный проект, нам нужно запустить следующую команду:
>>> npm install react-native-splash-screen –save //using npm >>> yarn add react-native-splash-screen //using yarn >>> react-native link react-native-splash-screen //To link the package to the react-native project
Запуск всплеск экрана в решении
Теперь нам нужно вернуться к проекту Android Studio Project и открыть файл «Mineactivity.java» из папки «./APH/JAVA/Com.splash». И тогда нам нужно скопировать код из следующего фрагмента кода в него:
package com.splash;
import com.facebook.react.ReactActivity;
import android.os.Bundle;
import org.devio.rn.splashscreen.SplashScreen;
public class MainActivity extends ReactActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this);
super.onCreate(savedInstanceState);
}
/**
* Returns the name of the main component registered from JavaScript. This is used to schedule
* rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "splash";
}
Здесь мы импортировали SplashScreen Пакет, который мы установили раньше. Тогда мы использовали Показать () метод SplashScreen Модуль в нашем МАКТИВНОСТЬ Чтобы показать экран всплеска до тех пор, пока не работает реактивная часть приложения в эмуляторе.
Теперь, когда мы запускаем приложение, Splashactivity Что мы создали, прежде чем будут работать сначала и отобразить всплеск экрана. Тогда МАКТИВНОСТЬ который бежит после Splashactivity Также будет отображаться всплеск экрана.
Сокрытие всплеск экрана в реактивной ровной части
Далее, что нам нужно сделать, это скрыть экран всплеска, когда наша реактивная ровная часть приложения работает на эмуляторе.
Для этого нам нужно вернуться в файл app.js нашего реагированного нативного проекта. Затем нам нужно импортировать активный пакет AGEN-Splash-Splash, как показано в фрагменте кода ниже:
import SplashScreen from 'react-native-splash-screen'
Тогда нам нужно использовать Скрыть () Метод, предоставленный SplashScreen Модуль для того, чтобы скрыть всплеск экрана, когда в эмуляторе выполняется актуальная часть приложения. Для этого нам нужно использовать код из фрагмента кода ниже:
export default class App extends Component{
componentDidMount() {
SplashScreen.hide();
}
Теперь, когда нативное экран app app app устанавливает на экран приложения Скрыть () Метод автоматически скрыт экран всплеска.
Настройка макета Splash Screen для МИСЕДИМАЦИИ
Нам все еще нужно создать макет всплеска, который будет работать во время МАКТИВНОСТЬ Отказ Для этого нам нужно вернуться к проекту Android Studio. Затем в каталоге «/res »нам нужно создать папку« Макет ». Внутри папки «/res/layout »нам нужно создать новый файл ресурсов макета, называемый« Launch_Screen.xml ». Этот файл «Launch_Screen.xml» будет включать шаблон экрана SPLASH, который будет работать во время пробела белого экрана.
Как мы можем видеть на скриншоте выше, раздел предварительного просмотра пуст. Теперь нам нужно добавить код, чтобы нарисовать шаблон экрана всплеска. Код предоставляется в фрагменте кода ниже:
Здесь мы создали родную линейную планировку с изображением, содержащим ширину, высоту и источник значка.
Следовательно, мы получим следующий результат:
Как мы можем видеть на скриншоте выше, макет в разделе предварительного просмотра появится в виде брызг в зазоре белого экрана, чтобы решить проблему зазора белого экрана.
Теперь, если мы запустим приложение в нашем эмуляторе, мы получим следующий результат:
Как мы видим, пробел белого экрана не появляется между экраном Splash и экраном приложения. Это означает, что экран всплеска также работает МАКТИВНОСТЬ и скрыт в приложении, когда app.js файл реагирования родных нагрузок.
Наконец, мы успешно завершили внедрение экрана Splash на платформе Android.
Заключение
Этот учебник является второй частью серии RACT NANDION ECOMMERCE APP PROLACE SERVILE SERVILE. В этой части мы продолжили от того, где мы остановились в первой части этого учебного пособия, но это может не касаться развития предыдущей части. Здесь мы узнали, как добавлять значки в нужную папку, чтобы реализовать экран всплеска. Затем мы получили пошаговое руководство по настраиванию настраиваемой части, чтобы отобразить экран всплеска. Наконец, мы также узнали, как разрешить проблему GAP White Screen, используя RACT-SPRASH-SPLASH-SPRASH как в родном, так и в реактивных частях нашего приложения.
Пост Построить реагировать на родное приложение для электронной коммерции № 2 | Всплеск экрана в Android появился в первую очередь на Крисс Отказ
Раскрытие
Этот пост включает в себя партнерские ссылки; Я могу получить компенсацию, если вы приобретете продукты или услуги из разных ссылок, представленных в этой статье.