配置Windows10的环境,开发reactnative的App

写此文,我会严格按照我配置的过程写,如果你选择按照我的安,每一步都要一样,以免报错
如果你严格按照我说的配,仍然出错了,欢迎留言,我们一块解决。

根据ReactNative0.57进行配置的,ReactNative最高支持Android8.1,以后会更新

一、进入ReactNative的官网

ReactNative-Windows10

1.下载nodejs、python和JDK

百度网盘下载地址

官网地址

二、安装上面的三个包

这三个包的安装都跟安装QQ一样,尽量不要更改盘符;在安装python的过程中可能会遇到python to PATH的字样,如果这个旁边有一个×,那么需要点进去换成第一个,这样就自动将环境配置好;安装完成以后打开终端win+r打开“运行”对话框,输入cmd回车,即可打开终端,在windows系统上叫提示符。

1.验证nodejs有没有安装成功

在终端输入一下内容

$:node --version

回车可以进入,如果出现版本,像这样:v10.15.0,那么说明成功

2.验证python

python跟nodejs一样

$:python --version

回车,如果出现版本号成功,像:Python 2.7.15

3.验证JDK

由于JDK不自动添加环境变量,需要先配置环境变量;
网上有很多经验,我随便复制一个,按照上面进行配置就可以了:配置JDK环境变量

$:java -version

回车,出现版本号就OK了,像这样:
java version "1.8.0_91"
Java(TM) SE Runtime Environment (build 1.8.0_91-b15)
Java HotSpot(TM) 64-Bit Server VM (build 25.91-b15, mixed mode)

这样就配置成功了,接下来安装react-native cli。

三、安装react-native

这个也是一样按照官方配置即可,我这里就复制复制

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
npm install -g yarn react-native-cli
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

通过以上几步已经成功安装好了ReactNative了

四、安装android studio3.1

网盘下载地址:android studio3.1
官网下载地址:android studio中文社区下载地址

五、配置Android studio

官网里面说的很明白,就是严格按照上面的进行配置,千万不要投机取巧,每一步都不能省;我需要说明的是,在进入 Android SDK以后,严格按照上面的进行勾选,如果本身就勾选了其他的,你可以不管,只需要将要求的勾选上,其余的不动。
下面的那一步,也就是配置ANDROID_HOME,这一步不能少,不管你是真机测试还是模拟器测试,这一步都是必须的,当然上面要求的都是必须的。
我把上面的工作做完成以后,我就新建了一个react-native项目。

$:react-native init TestApp --version 0.57.0

这条命令的后面--version 0.57.0是指定版本号,如果不写,那么创建的是最新版的RN项目(也就是reactNative)

等待初始化项目完成,完成以后,我使用android studio打开了项目下的android文件夹,然后等待,直到上面的运行可以点击即可,可以点击以后就选择运行,然后选择模拟器,默认的即可;模拟器启动完成以后会自动打开项目,此时我的并没有成功。

接下来我打开命令行提示符,在这里说这条命令行提示符的命令:
cd dir切换到dir目录下
dir查看当前文件夹下所有的文件,包括隐藏文件
这两条命令足够我们使用了,其余的可以自学,也可以使用界面的方式进行操作。
进入到刚创建的项目下,必须要在创建的项目下,输入:

$:react-native run-android

回车,然后等待命令行提示符出现可以输入命令的状态,此时可以看到nodejs的终端打开,而且打开的端口号是8081,但是此时并没有跑起来,此时找到模拟器里面刚安装的APP,这时就会看到nodejs终端里面跑起来了,等待跑完,跑到100%就能成功;到这儿我的都很顺利。

使用真机测试

接下来我尝试使用真机测试,使用真机测试需要打开开发者选项,每一种手机打开的方式不同,可以根据自己的手机查看;如果你成功的完成了上面的任务,那么后面的就是使用数据线插到电脑上,此时可能会弹出一个对话框,选择存储,如果没有,可以选择滑下状态栏看看有没有,如果有就更改,如果以上两种都没有,那么说明你的数据线可能插得不好,或者不支持。
进入开发者选项里面,打开USB调试,打开以后可能会弹出一个对话框,你选择确认即可,在项目中同样运行:

$:react-native run-android

回车,这样就等待,直到手机上出现显示的结果,双击r刷新,如果成功,可以打开项目里面App.js,对里面的内容进行修改,然后选择模拟器,双击r,看看刷不刷新;我的到这儿出现了错误:
Unable to load script from assets 'index.android.bundle'. Make sure your bundle is packaged correctly or you're running a packager server?
就是这样的错误,按照下面的博客进行操作即可成功,Unable to load script from assets 'index.android.bundle'. Make sure your bundle is packaged correctly or you're running a packager server?

需要说明的是:里面的那一条命令:
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
不能直接用,因为我的项目里面没有index.android.js,如果你跟我一样,只有index.js和App.js,那么需要将index.android.js换成index.js即可。

可能你通过网上的很多资料,看到可能说因为你电脑上没有安装adb驱动,此时你首先看一看你的手机能不能连接电脑,如果能,说明并不是这里的原因。

六、配置VScode,使其支持RN

安装完成以后,你编写代码能够提高开发效率,下面是一个别人写的博客的地址,非常感谢他,配置VScode开发reactNative

在博客中使用的所有其他的博客,我表示对你们的感谢,是你们帮我解决了很多很多问题,同时我也希望,各位能够说出我的不是。

猜你喜欢

转载自blog.csdn.net/weixin_34291004/article/details/87638133