素材巴巴 > 程序开发 >

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

程序开发 2023-09-21 23:03:18

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

2 安装react native环境
打开cmd命令行,安装react native环境,如下:
这里写图片描述
安装成功后后会有上面的提示

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

react-native init Demo

最后如下就说明环境搭建成功了
这里写图片描述

初始化的工程如下:
这里写图片描述

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

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";
 }
 

环境搭建下来,总体感觉比较坑爹的

源代码参考:
https://github.com/qiyei2015/FirstApp/tree/master


标签:

上一篇: 【vscode】设置插件安装位置 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。