React-Native
Как создать приложение в React Native
Начните изучать React Native, создав простое приложение
Сегодня мы разработаем приложение-счетчик с плавающей кнопкой и панелью навигации в React Native. По дороге мы узнаем:
- Как создать и использовать компонент класса Stateful в React Native
- Как создать панель навигации
- Как создать плавающую кнопку
Я предполагаю, что вы уже установили на свой компьютер набор инструментов React Native и Expo. Мы будем использовать Expo, так как это ускоряет разработку приложения в React Native.
Наше финальное приложение будет выглядеть так:
Исходный код на GitHub
Шаг 1: Создание проекта
Запустите следующую команду в своем терминале:
expo init simple_counter
Шаг 2: Откройте редактор и запустите сборщик expo metro.
cd simple_counter code . yarn start
Сначала измените свой каталог, и поскольку я использую редактор кода Visual Studio, я набрал code ., чтобы открыть каталог в редакторе кода Visual Studio. Затем я набрал yarn start, чтобы начать проект.
После запуска сборщика метро в браузере нажмите [Запустить симулятор iOS] или [Запустить эмулятор Android], и он создаст код JavaScript и запустит приложение.
Шаг 3. Установка сторонних библиотек
Нам нужно будет установить следующие библиотеки для этого проекта. Итак, выполните следующие команды для установки библиотек:
yarn add react-native-vector-icons yarn add react-navigation yarn add react-navigation-stack yarn add [email protected]
Если вы хотите узнать больше об этих библиотеках, просто найдите их в Google.
Шаг 4: Полный код в App.js
Если вы знаете базовую нативную или реактивную веб-библиотеку, этот код будет легко понять.
Для создания панели навигации я использую функции createStackNavigator и createAppContainer. Но перед этим вы должны сначала определить Экран. И я определил HomeScreen как компонент класса с сохранением состояния. Который я упомянул внутри AppNavigator как экран.
Для плавающей кнопки это CSS. Я использовал компонент TouchableOpacity и Значок со стилями CSS, чтобы создать плавающую кнопку в правом нижнем углу.
И, наконец, для управления состоянием, так как я использовал простой компонент класса с состоянием, так что это очень просто. В методе onIncrement, который вы увидите, я только что обновил состояние, поэтому метод рендеринга вызовет сам себя, чтобы повторно отобразить обновленное значение состояния на экране.
Вот как мы можем легко создать приложение с плавающей кнопкой и панелью навигации, основанное на реакции.
