debug react-native_react-native-debug - CSDN
  • React-Native集成JPush-react-native及应用设置Tags、Alias(iOS/Android)最近项目中用到推送功能,且项目是以React-Native框架实现iOS、Android跨平台开发,自然而然就选择了极光实现推送功能,由于以前是iOS开发...

    React-Native集成JPush-react-native及应用设置Tags、Alias(iOS/Android)

    最近项目中用到推送功能,且项目是以React-Native框架实现iOS、Android跨平台开发,自然而然就选择了极光实现推送功能,由于以前是iOS开发对Android了解的不很很深,在集成和设置别名等问题上也遇到些坑,现在就把集成步骤及遇到的问题分享出来,仅供大家参考,有什么问题也可以留言一起探讨:

    安装

    • cd到项目根目录
    • 执行 npm install jpush-react-native –save
    • npm install jcore-react-native –save ## jpush-react-native 1.4.2 版本以后需要同时安装 jcore-react-native

    配置

    配置包括两个步骤,自动配置和手动操作。

    1.自动配置:以下命令均在你的 React Native 项目目录下运行,自动配置后仍需手动配置一部分)

    • 执行脚本
      npm run configureJPush yourAppKey yourModuleName
      module name 指的是你 Android 项目中的模块名字(对 iOS 没有影响,不填写的话默认值为 app,会影响到查找 AndroidManifest 问题,
      如果没找到 AndroidManifest,则需要手动修改,参考下面的 AndroidManifest 配置相关说明)
      举个��:
      nam run configureJPush 48f30d0b04d9bc4f5ad7de53 app

    • 执行脚本
      react-native link

    2.手动配置部分
    iOS 手动操作部分 (4步)

    • 在React-Native工程中node_modules -> push-react-native -> ios - > RCTJPushModule -> RCTJPushModule.xcodeproj 拖入iOS工程Libraries中并添加:这里写图片描述
    • 在 iOS 工程中设置 TARGETS-> BUILD Phases -> LinkBinary with Libraries 找到 UserNotifications.framework 把 status 设为 optional

    • 在 iOS 工程中如果找不到头文件可能要在 TARGETS-> BUILD SETTINGS -> Search Paths -> Header Search Paths 添加如下路径
      $(SRCROOT)/../node_modules/jpush-react-native/ios/RCTJPushModule/RCTJPushModule

    • 在 xcode8 之后需要点开推送选项: TARGETS -> Capabilities -> Push Notification 设为 on 状态


    Android 手动操作部分

    • 修改 app 下的 build.gradle 配置:
      react native project/android/app/build.gradle
    android {
        defaultConfig {
            applicationId "yourApplicationId"
            ...
            manifestPlaceholders = [
                    JPUSH_APPKEY: "yourAppKey", //在此替换你的APPKey
                    APP_CHANNEL: "developer-default"    //应用渠道号
            ]
        }
    }
    ...
    dependencies {
        compile fileTree(dir: "libs", include: ["*.jar"])
        compile project(':jpush-react-native')  // 添加 jpush 依赖
        compile project(':jcore-react-native')  // 添加 jcore 依赖
        compile "com.facebook.react:react-native:+"  // From node_modules
    }
    将此处的 yourApplicationId 替换为你的项目的包名;yourAppKey 替换成你在官网上申请的应用的 AppKey。
    • 检查一下 dependencies 中有没有添加 jpush-react-native 及 jcore-react-native 这两个依赖。

    react native project/android/app/build.gradle

    ...
    dependencies {
        compile fileTree(dir: "libs", include: ["*.jar"])
        compile project(':jpush-react-native')  // 添加 jpush 依赖
        compile project(':jcore-react-native')  // 添加 jcore 依赖
        compile "com.facebook.react:react-native:+"  // From node_modules
    }
    • 检查 android 项目下的 settings.gradle 配置有没有包含以下内容:
      settings.gradle
    include ':app', ':jpush-react-native', ':jcore-react-native'
    project(':jpush-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jpush-react-native/android')
    project(':jcore-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jcore-react-native/android')
    • 检查一下 app 下的 AndroidManifest 配置,有没有增加 部分。
      react native project/android/app/AndroidManifest.xml
    <application
            ...
            <!-- Required . Enable it you can get statistics data with channel -->
            <meta-data android:name="JPUSH_CHANNEL" android:value="${APP_CHANNEL}"/>
            <meta-data android:name="JPUSH_APPKEY" android:value="${JPUSH_APPKEY}"/>
    
        </application>
    • 然后重新 sync 一下项目,应该能看到 jpush-react-native 以及 jcore-react-native 作为 android Library 项目导进来了

    • 加入 JPushPackage,有参数!

    RN 0.29.0 以下版本

    • 打开 app 下的 MainActivity,在 ReactInstanceManager 的 build 方法中加入 JPushPackage:

      app/MainActivity.java
      这里写图片描述


    RN 0.29.0 以上版本
    • 打开 app 下的 MainApplication.java 文件,然后加入 JPushPackage,也可以参考官方Demo
        // 设置为 true 将不弹出 toast
        private boolean SHUTDOWN_TOAST = false;
        // 设置为 true 将不打印 log
        private boolean SHUTDOWN_LOG = false;
    
        private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    
            @Override
            protected boolean getUseDeveloperSupport() {
                return BuildConfig.DEBUG;
            }
    
    
            @Override
            protected List<ReactPackage> getPackages() {
                return Arrays.<ReactPackage>asList(
                        new MainReactPackage(),
                        new JPushPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG)
                );
            }
        };

    到这里Push-react-native就已将集成到iOS和Android工程中了,然后就可以去极光后台发送通知,查看推送消息(注:如果你是Android工程师,在iOS集成后还需将推送证书上传到极光后台认证,认证通过后即可发送推送通知!!!)

    上面集成就告一段落了,下面就是在React-Native项目中给iOS和Android 设置Tags和 Alias了:

    Note: In Android, you must call initPush first, iOS doesn’t need.

    在设置tags和Alias前 Android项目首先需要在MainActivity中 initPush ,iOS不需要操作:

        public class MainActivity extends ReactActivity {
    
    
    
        /**
         * Returns the name of the main component registered from JavaScript.
         * This is used to schedule rendering of the component.
         */
        @Override
        protected String getMainComponentName() {
            return "yourApplicationName";
        }
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            JPushInterface.init(this);
        }
    
        @Override
        protected void onPause() {
            super.onPause();
            JPushInterface.onPause(this);
        }
    
        @Override
        protected void onResume() {
            super.onResume();
            JPushInterface.onResume(this);
        }
    }

    然后就可以根据你的逻辑及需求(在登录成功或者程序首页等等)去设置Tags及Alias。

    -eg:

     componentDidMount(){
    
            console.log('componentDidMount');
            JPushModule.setTags([this.state.tag], () => {
                    // Alert.alert('成功', 'tags 成功',[{text: 'OK'}]);
                    console.log('success set tag');
                }, () => {
                    // Alert.alert('失败','设置alias 失败',[{text:'fail'}]);
                    console.log('fail set tag');
                });
    
            JPushModule.setAlias('James', () => {
                Alert.alert('成功', '设置alias 成功',[{text: 'OK'}]);
                console.log('成功');
            }, () => {
                Alert.alert('失败','设置alias 失败',[{text:'fail'}]);
                console.log('失败');
            });
         }

    注: 在设置Tags时要传一个数组过去!!!

    本编文章以同步到博客:传送门

    展开全文
  • 在相应的路径下执行命令行:react-native init 项目名 (名称不可使用连接符等特殊字符,命名可以参考APP应用名称 比如 FaceBook) react-native --v //查看版本 react-native init demo --version 0.48.0//安装指定...

    构建项目

    在相应的路径下执行命令行:react-native init 项目名 (名称不可使用连接符等特殊字符,命名可以参考APP应用名称 比如 FaceBook)

    1. react-native --v //查看版本
      react-native init demo --version 0.48.0//安装指定的版本
      react-native init demo --verbose --version 0.48.0 //verbose是初始化的时候显示安装详情的,安装什么模块以及进度
      npm view react-native versions //可以查看react-native所有的版本信息
      

    跳转到对应路径下执行相应的移动端项目:

    cd 项目名 
    react-native run-ios or react-native run-android
    

    如果正常,运行效果如下:

    在这里插入图片描述

    RN调试技巧

    Developer Menu

    Developer Menu是React Native给开发者定制的一个开发者菜单,来帮助开发者调试React Native应用。

    在模拟器上开启Developer Menu

    Android模拟器:

    可以通过Command⌘ + M快捷键来快速打开Developer Menu。也可以通过模拟器上的菜单键来打开。

    iOS模拟器:

    可以通过Command⌘ + D快捷键来快速打开Developer Menu。

    Reload

    刷新页面,其快捷键是 command + R

    注意:只有修改 JavaScript 文件时,刷新功能才起作用。如果新增了文件或者修改了 Native 代码,就需要使用 Xcode 重新编译应用了。

    Debug JS Remotely

    该功能允许开发人员在 Chrome 中调试应用,其调试方式和调试 Web 应用一样。

    change bundle location

    改变打包后的地址

    toggle inspector

    在模拟器中查看组件样式。不怎么好用。

    disable fast refresh

    禁止快速刷新

    Show Perf Monitor

    该功能启用后会显示一个监控窗口,显示出实时的内存占用、UIJavaScriptFPS 等信息。帮助我们调试性能问题。

    Errors and Warnings

    在development模式下,js部分的Errors 和 Warnings会直接打印在手机或模拟器屏幕上,以红屏和黄屏展示。。

    Errors

    React Native程序运行时出现的Errors会被直接显示在屏幕上,以红色的背景显示,并会打印出错误信息。 你也可以通过console.error()来手动触发Errors。

    在这里插入图片描述

    Warnings

    React Native程序运行时出现的Warnings也会被直接显示在屏幕上,以黄色的背景显示,并会打印出警告信息。 你也可以通过console.warn()来手动触发Warnings。 你也可以通过console.disableYellowBox = true来手动禁用Warnings的显示,或者通过console.ignoredYellowBox = ['Warning: ...'];来忽略相应的Warning

    Chrome Developer Tools

    第一步:启动远程调试

    在Developer Menu下单击”Debug JS Remotely” 启动JS远程调试功能。此时Chrome会被打开,同时会创建一个“http://localhost:8081/debugger-ui.” Tab页。

    在这里插入图片描述

    第二步:打开Chrome开发者工具

    在该“http://localhost:8081/debugger-ui.”Tab页下打开开发者工具。打开Chrome菜单->选择更多工具->选择开发者工具。你也可以通过快捷键(Command⌘ + Option⌥ + I on Mac, Ctrl + Shift + I on Windows)打开开发者工具。

    • 断点调试

    当发生一些"莫名奇妙"的问题错误,常用解决方案

    这里的莫名其妙是指,在上一刻代码还可以正常运行,在没有修改的情况下爆红:

    1.刷新 ! 刷新! 刷新!

    2.重新使用react-native run-xxx命令启动App

    3.删掉App程序,关掉本地服务器,清除本地缓存

    yarn:清空缓存
    
    yarn cache clean
    
    npm:清空缓存
    
    npm cache clean -f
    
    
    展开全文
  • 作为一名大四狗和前端菜鸟,刚来公司实习的第一天老大就安排了我准备用react-native进行移动端的开发其实我对react-native这新玩意懂得不多,只知道它很强大,可以实现跨平台运行啦~所以得抓紧时间布置开发环境来学习...

    (前言)

    作为一名大四狗和前端菜鸟,刚来公司实习的第一天老大就安排了我准备用react-native进行移动端的开发奋斗其实我对react-native这新玩意还挺感兴趣的,知道它很强大,可以实现跨平台运行啦~所以得抓紧时间布置开发环境来学习学习了,说实话,Windows开发起来确实没有苹果的Mac OSX方便,很多开发环境都要自己去搭,也开发不了ios应用 = = 不过没关系,环境能搭就能开发,慢慢来嘛。下面是详细的搭建方法和各种填坑的分享。生气非常欢迎各路大神能指点一下和提供点建议,同样欢迎和我一样对react-native充满兴趣也是刚上手的童鞋一起来交流学习大笑

    第一步(安装基础软件)

    1.安装Python2.7,可到官网下载(注意目前不支持Python 3版本)==>>Here 

    2.安装Node.js 同样到官网下进行下载,还有中文官网,非常nice,(注意下载最新v6.10.2即可)==>>Here
     
         安装node都是下一步下一步,安装完后建议设置npm镜像以加速后面的过程(除非你翻墙,哈哈)
     打开cmd,输入node -v 看看有没有显示版本,能显示版本就证明安装成功了,图如下
     
     然后继续输入
                             npm config set registry https://registry.npm.taobao.org --global
                             npm config set disturl https://npm.taobao.org/dist --global
     上面两条语句主要是切换成淘宝团队的镜像(感谢淘宝团队),大大增加了在国内npm安装模块的速度
     好了,第一步就完成啦~
     

    第二步(安装React-Native Cli和Android Stdio)

     1.来来来,让我们安装react-native cli,方法很简单,打开cmd,输入npm install -g react-native,这样就安装好了,react-native命令也可以使用啦!惊讶

     2.安装Android Stdio略为复杂,因为AS需要JDK1.8或者更高的版本,因此在AS之前先把JDK环境给布局好
     下载JDK==>>Here
       
     下载对应的系统位数版本就可以了生气
    安装JDK,第一次是安装JDK,第二次是安装jre.建议两个都安装在同一个java文件夹中的不同文件夹中。留意一下JDK安装的目录就行了.
    配置JDK环境,

    (1)计算机→属性→高级系统设置→高级→环境变量

    (2)系统变量→新建 JAVA_HOME 变量 。变量值填写jdk的安装目录

    (3)系统变量→寻找 Path 变量→编辑,在变量值输入%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;(注意原来Path的变量值末尾有没有;号,如果没有,先输入;号再输入上面的代码)

    (4)系统变量→新建 CLASSPATH 变量。变量值填写.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar(注意最前面有一点)

    好了,JDK配置完成之后,就来下载安装Android Stdio吧==>>戳我下载


    我下载的是2.1版本,我第一次下了最新的2.3版本装完后加载不了,所以卸载重新装了偏老一点的版本,不知道是不是我电脑的问题,你可以尝试下载新版本(只要是2.0以上的版本react-native都支持的)

    (注意,在安装时不要改动安装的内容,全部都勾选安装,尤其是Android SDK和Android Device Emulator。)
    (安装过程的图片我暂时就不截了,你可以按我说的一步一步来,毕竟我喜欢用语言来表达(唉,其实就是想偷懒...)
    在安装android stdio时,全部内容都勾选,下一步下一步,然后,等待安装.
    初步安装完成后,会弹出一个安装项,选择Custom安装项,然后继续下一步即可.

    安装完成后,有3步要干的.

    1.在Android Studio的欢迎界面中选择Configure,再选SDK Manager注意了,一定要配置好SDK,在SDK Platforms窗口中,选择Show Package Details(要注意啊,很重要,之前我掉进这里了),然后在Android 6.0 (Marshmallow)中勾选Google APIs、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image(加油,细心点)

    2.在SDK Tools窗口中,选择Show Package Details,然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1。(必须是这个版本)

    3.新建ANDROID_HOME环境变量, 确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径.(方法和JDK那里很像啪)
     还有在PATH变量前面添加%ANDROID_HOME%\platforms;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;
     

    我之前在增加完变量后,react-native命令不起作用了,后来重新安装react-native解决了此问题.

    打开安装好的android stdio,然后start一个项目,下一步下一步,然后找到这个按钮,这个是启动模拟器的键,如果没有安装模拟器的话,可以选一个手机型号来下载,找到对应你的电脑的系统位数,来安装就行了,装完就开机等待,年轻人,要有耐心啊...偷笑

       

    开启完成后,在cmd里面敲adb devices,可以看到目前连上的设备,图中可以看到emulator-5554,没错,这就是传说中的模拟器......


    好啦,就先开机放在着晾着先,等我们开启RN的时候再玩你大笑,那么,第二大部也完成啦!

    第三步(造出你的第一个RN项目)

     创一个你想起什么名都行的文件夹,然后在cmd下cd进去,在此文件夹下,输入react-native init XXX(也是你随便你起的名字,但是第一次的话,建议写AwesomeProject,别问我为什么,因为官当文档是这样写的哈哈哈),因为文件比较大,可能会有点慢,请耐心等待哈

    成功后,cd进入帅气的文件名------AwesomeProject,然后就敲下最666的命令----react-native run-android

    接着,继续等,因为它要装gradle...(最好还是挂下VPN吧,不然真的很慢)

    编译时,会弹出2个窗口,一个是开启服务器的


    一个是编译成功后的


    如果你的和我一样,那么,恭喜你!微笑


    如果你的出现了红屏,请先按ctrl+m,然后选Reload,看看能不能成功,如果还是红屏,请你再按一次ctrl+m,然后选最后一项,也就是Dev Settings,然后点Debug server host&port for device,敲下你的ip地址+:8081,(如何看到本机的ip地址?==》》cmd -> 敲ipconfig -> IPV4显示的就是你的电脑ip地址),如果你的ip地址是192.1.168.123,那就敲下192.1.168.123:8081,然后再Reload一次!祝你好运!

    第四步(让你的手机上运行React Native)

      说实话,我这里遇到了不少坑,不过都一一填好了,每次填坑都是收获吧,下面我来说说具体的填坑过程。

      1.先把模拟器关闭(因为会有影响),然后用你的手机(记得是android系统的哦)接上电脑,打开手机的USB调试,然后电脑就在安装你的手机驱动了,我的手机很蛋疼,不会自动说,我只好搞了个应用宝(豌豆荚之类的都可以)来装驱动,装好驱动后,我那蛋疼的手机一直在向我电脑发射弹窗指令,很影响调试哭打开cmd继续输入adb devices,你会看到:


    手机已经连接上啦生气

    接着你可以进行AwesomeProject文件夹下进行react-native run-android试试,如果你手机比较厉害的话,一次就能成功安装了,只不过是红屏偷笑我手机比较傲娇,在编译时,直接给我BUILD FAILED了,原因我也找到了,听说很多国产机都这样,我的是魅族的,所以,来一起填坑吧!

    1.将 android/build.gradle 里的 gradle:1.3.1 改为 gradle:1.2.3

    2.将 android/gradle/wrapper/gradle-wrapper.properties里的 distributionUrl 版本改为gradle-2.2-all.zip

    保存,重新react-native run-android,等待,手机保持亮屏状态,编程成功后,你手机会看到


    不用担心,改改就好,摇下手机,选择设置项,跟前面说的设置好网络地址Reload就好了!(有个很重要的前提是手机要连wifi,一定要和电脑处在同一个局域网上)

    我还遇到个坑,编译完一打开app,就是白屏,遇到这情况的童鞋不要慌,请你悄悄地去手机应用管理上,把刚才安装的AwesomeProject的桌面悬浮窗的权限改成允许就可以啦~~

    还有一个坑,如果你的手机出现了Could not get BatchedBridge, make sure your bundle is packaged correctly不要怕,先Reload一下,再去网络地址应该就可以了。

    对了,还要说下,如果童鞋不喜欢设备调试,喜欢模拟器调试的话,只要把将 android/build.gradle 里的 gradle:1.2.3 改为 gradle:1.3.1,然后打开模拟器,再run一次就可以了。安静



    小结

    因为没什么经验加上之前没搞过安卓开发,所以对Android Stdio比较陌生,SDK的配置开始也是懵懵哒,幸好中间请教了下同事,感谢他的帮忙,让我填坑的效率高了好多吐舌头搭建好环境是学习框架的基础,react-native还是很有潜力的,因为比较新,所以很多东西都没完善吧,官方也在努力更新,相信会越来越好,我很看好react-native,所以我也会在学习react-native的过程中,多跟大家分享学习的心得。

    参考了网上的一些资料,感谢简书上的教程江清清的技术专栏,还有react-native官方的文档也非常不错。

    还有建议开发react-native还是用Webstrom2017吧,超强大的IDE,最新版也支持react-native语法了,除了启动有点慢之外其他的都真的很棒!

    这是我第一次写博客,希望能帮助正在学习搭建react-native环境中童鞋们微笑








    展开全文
  • 这两个问题主要是由于reactnative和vue,react等框架不一样,这个是跨平台的,写的app不能直接在网页上即看即所得[意味着不能”直接地”console.log打印..]只能在真机调试或者在模拟器中查看,所以关于调试就显得...

    前言:
    这篇博文主要介绍两个方面:
    1. react-native项目的调试
    2. react-native项目的代码智能提示
    这两个问题主要是由于reactnative和vue,react等框架不一样,这个是跨平台的,写的app不能直接在网页上即看即所得[意味着不能”直接地”console.log打印..]只能在真机调试或者在模拟器中查看,所以关于调试就显得特别重要。其次关于智能提示:react-native同react一样,秉承”一切元素皆组件“设计理念,但它比react更甚:直接抛弃html标签,所有“标签”都得用它的封装好的组件。所以这就是智能提示的重要性。

    1. react-native项目的调试

    1.1 使用vscode调试

    1.1.1 安装React Native Tools

    插件支持react-native代码高亮、debug以及代码提示等十分强大的功能

    这里写图片描述

    1.1.2 使用React Native Tools进行调试

    1. 点扩展插件上面的调试
    2. 播放按钮的旁边,给预调试的项目添加配置
      这里写图片描述

    3. 然后弹出一个选择 ,选react native
      这里写图片描述

    4. 这里我选的是Debug Android[因为我的模拟器是安卓的]
      这里写图片描述
      随后生成一个launch.json文件,按照默认配置即可。对了我项目是在react native 脚手架上写的所以默认配置即可
      这里写图片描述

    快捷键F1—>输入 React Native Run Android 来部署应用
    相当于命令行敲下 的react-native run-android

    这里写图片描述

    应用成功启动:

    这里写图片描述

    开始debug:
    1. 打断点
    例如我们在注册页面的判空那里打个断点,当用户点击注册按钮时触发这个函数:
    这里写图片描述

    1. 开始调试
      调试——》debug Android [即选择刚刚我们新添加的那个配置] ——》开始调试[播放按钮]
      这里写图片描述

    开启调试成功: 会出现一行调试的悬浮窗口
    这里写图片描述

    当我触发注册按钮时:断点
    这里写图片描述

    接下来就是正常的调试步骤了
    按钮依次是:继续,单步跳过,单步调试,单步跳出,重启,停止
    这里写图片描述

    1. 对了还有讲下右边界面
      可以看变量,增加断点等
      鼠标移上变量也可以看到变量值,这和chrome调试差不多
      这里写图片描述

    1.2 Chrome开发者工具调试

    1.win10下 在模拟器ctrl + m 打开菜单选项
    选择debug js remotely
    这里写图片描述

    此时谷歌会打开新页面,如未打开自己输入以下地址亦可
    http://localhost:8081/debugger-ui/
    这里写图片描述
    页面显示Status: Debugger session #0 active. 则证明模拟器连接上了该调试。

    1. F12 打开控制台
      在控制台即可以看到console的输出,以及在sources项中断点调试js脚本[和一般的chrome调试没差别]
      只是在网页不能看到app样子只能输出信息 ,app还是得在真机或者模拟器上查看

    2. 利用Typings为Visual Studio Code实现智能提示功能

    2.1 全局安装typings

    npm install -g typings

    2.2 使用typings安装相关代码提示包

    先进入你的react-native项目中,在项目的根目录下:

    typings install dt~react-native --save --g

    安装完成后VSCode的根目录下会多一个typings.json文件
    至此配置完,以后关于reactnative的代码就有自动提示+补全。

    这里写图片描述

    当然也可以使用typings 为node,Lodas等增加智能提示。

    后记:

    学习reactnative让我真正由衷地发出前端今非昔比的感叹..
    从环境搭建到写的应用可以直接调手机的本地文件[前端再也不是简单的网页脚本了。。]到代码调试。让我找到了以前用c++写游戏调试的码感。。
    大抵是以前的一个html+js文件就可以跑个网页的时代一去不复返了,大抵是前端走向全栈将要走向客户端后端的大统一了..
    要学的东西很多,很新,技术也层出不穷的,不过让我兴奋,为前端感到骄傲~

    展开全文
  • "presets": [ "react-native" ], "sourceMaps": true } Many JavaScript developers are used to simply log stuff into the console when debugging their software. This works kinda ok...
  • 使用react-native-debugger调试react-native

    千次阅读 2018-12-07 14:18:58
    用了http://localhost:8081/debugger-ui,安装了react-devtools,又发现...官网地址:https://github.com/jhen0409/react-native-debugger/releases。 运行如下: 使用 如何使用呢? 相当的简单, 参考文档: htt...
  • 最后是错误解决办法,本文只说明安装方法,具体使用查看https://github.com/prscX/react-native-file-selector ...2、最好不要自动 link --react-native link react-native-file-selector 手动...
  • react-native 实现拍照上传及扫描二维码功能 ...使用的插件是:react-native-camera 和 react-native-image-picker “react-native”: “0.59.9” “react-native-camera”: “git+https://git@github.com/react...
  • 一个高效率的开发,不仅仅需要扎实的专业,掌握熟练的调试技巧也是必备技能,熟练的调试技能可以...在安装了xcode的基础上,在项目根目录下运行react-native start即可启动本地服务,然后运行react-native run-ios就...
  • react-native集成小结(各种坑)react-native环境搭建参考先要有个android项目 配置环境 、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、 android原有项目中集成react-native,...
  • 因为后边要做rn项目,所以...react-native 需要的依赖的环境:node, python2, jdk,react-native-cli. 这里需要注意,python必须是2,jdk必须是1.8以上,jdk遇到过坑,因为本地安装了多个版本的jdk,使用java -ve...
  • 最近公司项目有一个移动端app,决定采用react-native开发,项目中有这么个要求,要求react-native中嵌入原生页面,然后原生页面嵌入unity,并实现原生和unity之前相互通信,网络查找资料后实现这些功能,查找过程中...
  • D:\react-native>react-native init MyReactNativeApp This will walk you through creating a new React Native project in D:\react-native\MyReactNativeApp 'yarn' �����ڲ����ⲿ���Ҳ���ǿ�...
  • 参考资料:https://github.com/Microsoft/react-native-code-push 环境:react-native(0.58.6) 第一部分:注册app 1.打开控制台,并执行代码: code-push app add <appName> <os> <platform> ...
  • react-native-sqlite-storage 版本 3.3.3 1.安装 命令行进入到ReactNative项目根目录下执行 npm install react-native-sqlite-storage --save   2.进行全局Gradle设置 编辑 android/settings.gradle文件,...
  • 1、react-native-cli 无法使用exp服务 react-native init program-name #初始化项目 npm start(react-native start) #在项目目录下启动 js service react-native run-android #已连接真机或开启模拟器前提下,...
  • npm install jpush-react-native --savenpm install jcore-react-native --save ## jpush-react-native 1.4.2 版本以后需要同时安装 jcore-react-native 一、自动配置部分(以下命令均在你的 REACT NATIVE PROJECT.....
  • Windows下搭建react-native开发环境

    千次阅读 2018-03-02 15:54:18
    最近公司没有什么事情,所以决定研究一下react-native.react-native是Facebook研发的一种用于移动端研发hybrid app 的技术(研究的不深,目前只知道这个作用),那么对于react-native的环境搭建却是有些复杂.那么对于刚刚...
  • react-native ios端真机调试 打包与发布

    万次阅读 2017-02-03 10:13:10
    最近做了一个项目,用的react-native 开发的iso项目。 由于自己没有oc基础,所以该项目几乎全用js写得。(顺便说一下,react-native 开发,最好还是学一下原生,起码的看得懂,不然搞配置一抓一把黑) 1:关于真机...
1 2 3 4 5 ... 20
收藏数 6,815
精华内容 2,726
关键字:

debug react-native