2018.10月,搭建windows下的React Native开发环境

react

我是根据react native中文网教程https://reactnative.cn/docs/getting-started.html进行搭建

react native必须安装的依赖有:Node、React Native 命令行工具、Python2 以及 JDK 和 Android Studio。(jdk安装不做记录)

虽然你可以使用任何编辑器来开发应用(编写 js 代码),但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境。

目录

1.node.js开发环境

2.python开发环境

3.Android 开发环境

4.创建React Native项目,运行测试


(非常重要的一句话)文档原话:

注意 Node 的版本必须高于 8.3,Python 的版本必须为 2.x(不支持 3.x),而 JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本)。安装完 Node 后建议设置 npm 镜像以加速后面的过程(或使用科学上网工具)。

1.node.js开发环境

1.下载页面https://nodejs.org/zh-cn/

2.点击下载好的,无脑next即可完成安装(注意选择自己的安装路径,默认安装在C盘)

3.在dos窗口输入node -v查看node.js的版本(这里不同配置环境变量,安装的时候自动配置好了)

4.安装完 Node 后设置 npm 镜像以加速后面的过程。

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

5.Yarn、React Native 的命令行工具(react-native-cli)

Yarm是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

npm install -g yarn react-native-cli

查看npm配置命令:npm config list

6.安装完 yarn 后同理也要设置镜像源:

yarn config set registry https://registry.npm.taobao.org --global

yarn config set disturl https://npm.taobao.org/dist --global

安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install 某第三方库名

2.python开发环境

1.python所有版本下载页面 https://www.python.org/downloads/release

2.点击,也是无脑next,记得选自己的安装路径。

3.配置环境变量

  (1) 右键点击"计算机",然后点击"属性"

  (2) 然后点击"高级系统设置"

  (3) 选择"系统变量"窗口下面的"Path",双击即可

  (4) 选择新建,添加python安装路径即可(我的E:\instell\python)

4.python --version查看版本(注意这里是两个--)

3.Android 开发环境

android环境步骤繁多,专门写了一篇帖子详细记录了安装和配置android studio的步骤:https://blog.csdn.net/Destiny_strive/article/details/83095967

4.创建React Native项目,运行测试

1.cd到你想创建的目录下:

2.执行 react-native init firstProject ( firstProject 是你的项目名)

构建完成:

可以在对于目录下查看:

3.cd到你的新建的项目下执行:react-native run-android,(执行react-native run-android前保证android模拟器已经打开了,或者手机已经连接电脑并且打开了usb调试)注意第一次运行时需要下载大量编译依赖,耗时可能数十分钟。此过程严重依赖稳定的翻墙工具,否则将频繁遭遇链接超时和断开,导致无法运行。(我没翻墙的)

中途会弹出一个node.js的窗口,不要关闭

模拟器加载完成(这里我修改了初始化项目的文字和颜色):

以上是 2018.10月,搭建windows下的React Native开发环境 的全部内容, 来源链接: utcz.com/z/382939.html

回到顶部