React Native开发一 webstorm搭建React Native开发环境

最新推荐文章于 2020-10-09 15:36:28 发布

飞翔的熊blabla

最新推荐文章于 2020-10-09 15:36:28 发布

阅读量314

点赞数

分类专栏： html+js+jquery+css

html+js+jquery+css 专栏收录该内容

642 篇文章 14 订阅

订阅专栏

转载于https://blog.csdn.net/qiyei2009/article/details/78820207

1 前言
最近打算真的开始学习一下跨平台APP开发，一直在关注RN，因此也打算真的开始学习下(其实是笔者的公司也开始有这种跨平台的需求了，笔者在一家传统公司)。最后开始打算从RN开始学起。废话不多说，开始搞起。

2 基于webstorm的RN环境搭建
本次开发采用的环境为windows10+webstorm2017.3+安卓开发环境
需要的开发环境主要有node.js + react native + android sdk

因为我是Android狗，所以也不去搞IOS了，也没钱去买Mac
因为Android环境造就搭建好了，所以Android环境的搭建省略，网上也可以搜到怎么搭建Android开发环境。
因此，主要搭建node.js + react native ，下面是搭建步骤

1 下载安装node.js
安装之前先检查是否已有node.js环境，在cmd 命令下输入node -v, 出现如下画面，则表示已经成功安装node.js环境

很明显，我没有搭建
去node.js官网下载安装包并安装，然后配置环境变量。注意下载对应的版本，Windows下建议下载X64的，我下了一个LTS版本：8.9.3

配置环境变量步骤：右击此电脑–》属性–》高级设置–》环境变量，然后将变量名NODE_PATH和变量值（node.js安装目录）配置进去，这段比较简单，可以自行网上查找资料完成。
重新打开cmd窗口，输入node -v即可看到安装完成了。

配置npm源
由于国外的npm服务器下载太慢了，因此配置国内的服务器如下：

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
1
2
2 安装react native环境
打开cmd命令行，安装react native环境,如下：

安装成功后后会有上面的提示

测试安装react native环境是否成功，可以在任意目录执行如下命令，新建一个react-native工程

react-native init Demo
1
最后如下就说明环境搭建成功了

初始化的工程如下：

3 下载安装WebStorm
去官网下载WebStorm了，下载完了记得找个办法和谐下。

至此，react native的开发环境已经完成，可以开始新建RN项目了

3 新建RN的工程并创建项目运行
1 打开webstorm，创建一个react native项目
点击工具栏File–》new–》project,可以看到如下画面

location填写你创建的项目要存放的路径，后面untitiled改成自己项目的名称，
Node intercepter填写第一步node.js的安装路径
create-react-app填写的是react-native-cli的地址，默认在C盘的用户名下面的某个地址

最后建好的工程如下：

2 运行react-native 项目
1 用Android Studio 打开该项目，下载一些必要的库或者gradle工具后即可运行
此处暂且不说
2 在WebStorm中点击运行下的 android即可

修改一下App.js，增加一句这是第一个react native程序，

运行效果如下：

4 错误记录
1 出现Could not find com.android.tools.build:gradle:3.0.0.
解决办法
http://blog.csdn.net/zhouxianling233/article/details/78359217
这个是升级到gradle版本问题，与react native基本上无太大关系

2 运行程序标红，出现unable to load script from assets
https://www.cnblogs.com/vipstone/p/7205608.html
报错页面晃动手机，显示菜单 =》点击Dev Settings =》点击Debug server host & port for device =》设置IP和端口（ex:192.168.0.20:8081）
ip为与手机连接的电脑的IP

3 标红，出现could not connect to development server
http://blog.csdn.net/qq_25827845/article/details/52974991

控制台下启动npm server

npm start
1
4 出现bundling failed: NotFoundError: Cannot find entry file index.android.js in any of the roots:
这是因为新版本RN需要修改配置了，参考如下：
https://github.com/facebook/react-native/issues/16517

For Android, go to your Module: app’s build.gradle and add the following above the line: apply from: “../../node_modules/react-native/react.gradle”

project.ext.react = [
entryFile: “index.js”
]
In MainApplication.java, you need to override another function in the anonymous ReactNativeHost class by adding this:

@Override
protected String getJSMainModuleName() {
return "index";
}
1
2
3
4
环境搭建下来，总体感觉比较坑爹的

源代码参考：
https://github.com/qiyei2015/FirstApp/tree/master
---------------------
作者：带你装逼带你飞的程序猿
来源：CSDN
原文：https://blog.csdn.net/qiyei2009/article/details/78820207
版权声明：本文为博主原创文章，转载请附上博文链接！