Как выполнить вход в React Native?
React Native — это программная среда пользовательского интерфейса с открытым исходным кодом, созданная Meta Platforms, Inc. Она используется для разработки приложений для Android, Android TV, iOS и т. д. Мы всегда ищем более короткие циклы разработки, более быстрое развертывание и лучшее производительность приложения. И существует так много гибридных мобильных фреймворков, таких как NativeScript, React Native, Ionic, Xamarin, PhoneGap и т. д.
В этой статье мы узнаем о регистрации в React Native.
Ведение журнала: это быстрый и простой способ отладки вашего приложения на этапе разработки. Это помогает получить представление о функционировании приложения. Чтобы выполнить ведение журнала, мы можем просто использовать операторы console.log() для регистрации необходимой информации или индикаторов.
Примечание. Удалите эти операторы console.log(), прежде чем мы отправим наш продукт на этап разработки, поскольку эти операторы просто создадут накладные расходы.
Это можно сделать с помощью двух функций
- console.log
- консоль.предупреждать
- реагировать родные журналы
Чтобы узнать больше о ведении журнала, давайте создадим реактивное приложение:
Чтобы создать приложение React-Native, мы будем использовать версию Expo CLI, которая будет намного более плавной для запуска ваших приложений React Native.
Expo: Это фреймворк и платформа для универсальных приложений React. Это набор инструментов и сервисов, созданных на основе React Native и нативных платформ, которые помогают разрабатывать, создавать, развертывать и быстро выполнять итерации для iOS, Android и веб-приложений на основе одной кодовой базы JavaScript/TypeScript.
Ниже приведена пошаговая реализация описанного выше подхода.
Шаг 1: Откройте терминал и выполните приведенную ниже команду.
npm install -g expo-cli
Шаг 2: Теперь expo-cli установлен глобально, поэтому вы можете создать папку проекта, выполнив приведенную ниже команду.
expo init "projectName"
Шаг 3: Теперь перейдите в созданную папку и запустите сервер с помощью следующей команды.
cd "projectName"
Шаг 4: Установите зависимость
npm install --save react-native-logs
Структура проекта: Это будет выглядеть следующим образом:
Пример 1. В этом примере мы будем отображать сообщение на терминале с помощью console.log.
Синтаксис:
console.log("content")Javascript
import React from "react";import { Text, View } from "react-native"; export default function App() { console.log("App executed"); return ( <View > <Text style={{ color: "green", fontWeight: "bold", fontSize: "30px" }}> GeeksforGeeks </Text> <Text> Logging in React Native </Text> </View> );} |
Выход:
Объяснение: Используя метод console.log(), можно вести журнал в консоли. Как видно из приведенного выше примера, «Приложение выполнено» регистрируется в консоли.
Пример 2: В этом примере мы будем вести журнал с помощью console.warn. Эта функция выполняет регистрацию в желтом поле.
Синтаксис:
console.warn("content")Javascript
import React from "react";import { Text, View } from "react-native"; export default function App() { console.warn("Hi Geek!! Lets code together!"); return ( <View > <Text style={{ color: "green", fontWeight: "bold", fontSize: "30px" }}> GeeksforGeeks </Text> <Text> Logging in React Native using console.warn </Text> </View> );} |
Выход:
Объяснение: Как вы видите предупреждение желтого цвета, таким образом мы можем вести журнал с помощью console.warn.
«Привет, Гик!! Давайте кодить вместе! " регистрируется в желтом поле в консоли
Пример 3. В этом примере мы будем вести журнал, используя зависимость под названием react-native-logs.
Эта зависимость помогает придать журналам определенный стиль. Имеет 4 формы; отладка, информация, предупреждение и ошибка
Эти формы можно увидеть в приведенном ниже примере.
Javascript
import React from "react";import { Text, View } from "react-native";import { logger } from "react-native-logs"; export default function App() { var log = logger.createLogger(); log.debug("I am a Debug log"); log.info("I am a Info log"); log.warn("I am a Warning log"); log.error("I am a Error log"); return ( <View> <Text style={{ color: "green", fontWeight: "bold", fontSize: "30px" }}> GeeksforGeeks </Text> <Text> Logging in React Native using react-native-logs </Text> </View> );} |
Выход: