React Native 环境搭建

最新推荐文章于 2024-08-08 15:44:09 发布

weishujie1994

最新推荐文章于 2024-08-08 15:44:09 发布

阅读量136

点赞数

分类专栏： React Native

本文链接：https://blog.csdn.net/sinat_33155679/article/details/84384290

版权

React Native 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

准备工作：

安装jdk（注意配置好环境），node.js，谷歌浏览器

安装WebStorm，点击File->Setting->Plugins->搜索并安装React Native Console插件->重启；

安装AVD Manager和SDK Manager（注意配置以管理运行），打开SDK Manager安装你想要装的Android SDK版本（这部最好百度一下怎么操作，最好是有一点搭建安卓环境的基础，之后是配置ANDEROID_HOME环境变量，这个也自行百度）.

打开命令行：npm install -g yarn react-native-cli

初始化一个项目：

打开命令行：react-native init HelloWorld

打开AVD Manager配置一个安卓虚拟机（建议是7版本），start一个安卓虚拟机

打开WebStorm，open HelloWorld文件夹，在WebStorm里面打开/android/build.grale配置一下安卓编译环境，依然还是最好有点安卓环境搭建的基础，修改repositories地址为国内地址，如将google(),jcenter()删掉换成：

maven {url "http://maven.aliyun.com/repository/google/"}
maven {url "http://maven.aliyun.com/repository/jcenter/"}

重要的是要看懂ext里面的配置是什么意思：

ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 16
        compileSdkVersion = 28
        targetSdkVersion = 26
        supportLibVersion = "28.0.0"
    }

可以选择使用SDK Manager安装其所需要的版本，也可以将其修改为你已经下载的有的版本。

之后可以看WebStorm做下角的RN Console，点击打开面板之后，点击Debug Android，此时会自动在安卓虚拟机里面安装并打开HelloWorld软件，再点击Android Dev Menu或在虚拟机上按下Ctrl+m，会出来调试菜单，点击Enable Live Reload和Enable Hot Reloading。点击open debug-ui或在谷歌浏览器打开http://localhost:8081/debugger-ui/ 即可调试