debugging 调试React-Native应用程序的最佳方法?

velaa5lx  于 2022-12-27  发布在  React
关注(0)|答案(3)|浏览(163)

我是React-Native开发的新手。
以前,我在不同的混合移动的应用程序框架(离子, cordova 等)开发了许多应用程序。调试离子, cordova 框架的应用程序非常容易。
请建议调试React-Native应用程序的最佳方法

s71maibg

s71maibg1#

如果您使用的是Android Emulator,请按计算机键盘上的CTRL + M打开调试菜单。
如果您使用的是iOS模拟器,请从计算机键盘按CMD + D打开调试菜单。
点击使用Chrome进行调试以打开计算机中的Chrome调试器工具。在Chrome中打开调试工具后。

    • 右击屏幕-〉检查。**

现在你可以在屏幕右侧看到调试器控制台窗口。选择控制台选项卡。
现在,在您的应用程序中,您可以放置日志来调试应用程序。

    • 控制台. log('调试');**

示例:

import React, { useState, useEffect } from 'react';

import { View, StyleSheet, Text, LogBox } from 'react-native';

export default function App() {

  //LogBox.ignoreLogs(['Remote debugger']);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'GET',
    })
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson);
      })
      .catch((error) => {
        console.error(error);
      });

  }, []);

  console.log('App Called...');

  return (
    <View style={styleSheet.MainContainer}>

      <Text style={styleSheet.text}>
        Debug App in Android Emulator in React Native using Chrome Debugger Tool.
      </Text>

    </View>
  );
}

const styleSheet = StyleSheet.create({

  MainContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },

  text: {
    textAlign: 'center',
    fontSize: 27,
    padding: 10
  }

});
5lwkijsr

5lwkijsr2#

如果你在react-native项目中使用expo,你应该使用expo-cli,否则react-native-cli应该带有一个模拟器或者一个连接在调试模式下的电话。

nwo49xxi

nwo49xxi3#

根据我过去的经验,调试React原生应用程序的最佳且简单的方法是使用Flipper应用程序(由Facebook为React原生应用程序开发)

相关问题