react native window下的环境搭建和调试方案

时间:2021-10-04 07:29:30

这几天使用react native开发app,遇到一些坑,先记录下来,以后再继续补充

环境搭建


打开react native中文网,发现环境搭建特么也太复杂了,安装各种插件/软件,对于我们 编辑器+浏览器 就能搞事情  的前端开发人员来说,确实有些蛋疼,特别是有些包还需要*,甚至*也下不下的时候。

react native  window下的环境搭建和调试方案

那么,可不可以不按照它指定的搭建方式去搭建,经过尝试,完全可以不用安装那么多东西。下面开始我的简单版环境搭建

安装java jdk  / android sdk /  配置环境变量 / 链接手机运行。

详细说明:

1/ 首先需要有node ,然后通过 npm install react-native-cli -g 全局安装 react-native

  找个文件夹 初始化一个项目  react-native init AwesomeProject 

2/ 安装java jdk,并配置环境变量 (参考这个帖子

3/ 安装android sdk

  由于*的关系,国内好多安装方法都无法访问google,这里给大家提供一个简单的android  sdk包

  链接:http://pan.baidu.com/s/1hrWgZwK 密码:6m70

  下载解压后,配置环境变量(参考这个帖子

    在压缩包中双击sdk manager.exe,当然点一下可能不行,就多点几下,弹出窗口中选择最新的sdk tools   platform-tools build-tools 点击install(由于网络问题,需要多试几次)

  react native  window下的环境搭建和调试方案

  

4/ 然后链接手机,手机打开开发中调试,在电脑的项目文件夹打开命令行,运行 react-native run-android,就可以慢慢打包了,耐心等待,开始的时候下载gradle会特别慢,不要紧,耐心等待,或者去这里下载,https://services.gradle.org/distributions/ ,

react native  window下的环境搭建和调试方案

运行到这里,在手机上就装好了。

react native  window下的环境搭建和调试方案

注:如果到此步没有打包成功,提示缺乏licenses,则可以创建要给xxx.bat文件,贴入如下代码,然后点击运行以下,应该就可以了。

mkdir "%ANDROID_HOME%\licenses"
echo |set /p="8933bad161af4178b1185d1a37fbf41ea5269c55" > "%ANDROID_HOME%\licenses\android-sdk-license"

以后就真机调试就好啦,在menu菜单中选择 debug js remotely,就会自动在chrome浏览器打开控制台调试,很方便

菜单如下

react native  window下的环境搭建和调试方案

一般在打开app的情况下摇一摇就出menu ,如果没有的话,就在电脑命令行输入 react native  window下的环境搭建和调试方案,就会在手机端弹出菜单。

补充:在菜单中可以选上 live roload 和hot reloading ,这样当修改完成代码,就可以自动热更新了。(有时热更新不管用,就需要reload或者直接重新打包安装)

热更新需要配置 端口,在dev settings中选择debug server ,在弹窗中输入 电脑ip地址:8081,就Ok了。

react native  window下的环境搭建和调试方案

react native  window下的环境搭建和调试方案

react native  window下的环境搭建和调试方案

完!