zoukankan      html  css  js  c++  java
  • react native 如何用vs code 进行调试

    前言

    以前做react-native 写的文章,在此分享一下。

    在react-native 中有两种方式调试,一种是crome 调试,一种是本地调试,接下来介绍的是本地调试。

    解决方案

    在vs code 中,必须安装一个工具才可以使用:

    接下来介绍使用方式:

    先来一张大图,嗯,是的一张大图。

    这时候,我们调试的是Debug Android.

    那么就选择添加它好了,至于怎么配置,请看大屏幕,添加配置按钮。

    然后按F1,这时候是很好的快捷键,选择启动模式,嗯,很开心的启动模式,看图:

    请看第一个,react native:Run android on simulator

    就是这个,设置启动模式。

    很开心了,那么这个时候其实,已经可以调试了。

    是的,的确如此。

    如果无法启动,请确定是否安装了react dev tools

    但是对于react native 来说,我们用typescript来调试的,so:

    是否可以用tsx直接来使用?或者调试,当然是可以的。

    创建rn-cli.config.js包,内容如下:

    module.exports = {
    
    getTransformModulePath() {
    
    return require.resolve('react-native-typescript-transformer');
    
    },
    
    getSourceExts() {
    
    return [ 'ts', 'tsx' ]
    
    }
    
    };
    

    上面代码是tsx到js的一个转换,其实就是转换成js,一般来说index.js不需要我们去改变,那么从app.js开始就可以去填写app.tsx.

    yarn add --dev typescript
    
    yarn add --dev react-native-typescript-transformer
    
    yarn tsc --init --pretty --jsx react
    
    touch rn-cli.config.js
    
    yarn add --dev @types/react @types/react-native
    
  • 相关阅读:
    emacs窗口切换神器--window-numbering
    yum命令总结
    Emacs快捷键设置
    emacs常用命令
    Emacs编辑远程服务器中的文件
    (转)emacs安装cedet和ecb
    (转)replace 和 on duplicate key update语句
    HashMap解决hash冲突的方法
    程序员的学习和积累
    HttpClient 设置代理方式
  • 原文地址:https://www.cnblogs.com/aoximin/p/13035793.html
Copyright © 2011-2022 走看看