如何在 React Native 中执行日志记录？

React Native 是 Meta Platforms, Inc 创建的开源 UI 软件框架。它用于开发适用于 Android、Android TV、iOS 等的应用程序。我们一直在寻找更短的开发周期、更快的部署时间和更好的应用性能。并且有很多混合移动框架，例如 NativeScript、React Native、 Ionic、Xamarin、PhoneGap 等。

在本文中，我们将学习如何登录 React Native。

日志记录：这是在开发阶段调试应用程序的一种快速简便的方法。它有助于深入了解应用程序的功能。要执行日志记录，我们可以简单地使用console.log()语句来记录所需的信息或指标。

注意：在我们将产品推入开发阶段之前删除这些 console.log() 语句，因为这些语句只会在那里产生开销。

这可以使用两个函数来完成

• 控制台日志
• 控制台警告
• 反应本机日志

要了解有关日志记录的更多信息，让我们创建一个 react-native 应用程序：

要创建一个 React-Native 应用程序，我们将使用 Expo CLI 版本，它可以更流畅地运行您的 React Native 应用程序。

Expo：它是通用 React 应用程序的框架和平台。它是一组围绕 React Native 和原生平台构建的工具和服务，可帮助您使用相同的 JavaScript/TypeScript 代码库在 iOS、Android 和 Web 应用程序上开发、构建、部署和快速迭代。

以下是上述方法的分步实施。

第 1 步：打开终端并运行以下命令。

npm install -g expo-cli

第 2 步：现在 expo-cli 已全局安装，因此您可以通过运行以下命令来创建项目文件夹。

expo init "projectName"

第 3 步：现在进入创建的文件夹并使用以下命令启动服务器。

cd "projectName"

第四步：安装依赖

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 (
        
            
                GeeksforGeeks
            
            
                Logging in React Native
            
        
    );
}

输出：

说明：使用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 (
        
            
                GeeksforGeeks
            
            
                Logging in React Native using console.warn
            
        
    );
}

输出：

说明：正如您看到的黄色警告，这样我们可以使用 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 (
        
            
                GeeksforGeeks
            
              
            
                Logging in React Native 
                using react-native-logs
            
        
    );
}

输出：