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

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

现在装rn的环境越来简单了,可能是我熟悉了,可能最大的阻碍是有一些包下载的时候出现超时,这个时候你可以考虑切换成淘宝的,包含npm和android都是有相关的。

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

更新日记(2021年1月28日):自0.60以后,运行rn项目不再通过react-native的方式,而是通过yarn或者npx;在装包的时候不需要手动link了,已经支持自动link了。ios端使用pod的方式了,所以在跑ios之前需要进入ios的文件夹下执行pod install,如果提示你没有安装,你安装以后继续即可。

一、进入ReactNative的官网

ReactNative-Windows10

1.下载nodejs、python和JDK

百度网盘下载地址

  • nodejs
  • python2.7
  • JDK1.8
    注意说明的是,就是官网说的那样,python只能是2.x
    现在对 java 的版本也升级了,不仅仅是 1.8 版本了。

官网地址(推荐)

二、安装上面的三个包

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

node --version
# 如果显示像 v10.15.0 这样的就代表成功
python --version
java -version
# 跟 nodejs 相同

这样就配置成功了,接下来安装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

注意:现在官方推荐使用 npx 的方式,差别不大,只不过是在运行的时候在前面添加npx或者yarn而已,其他并没有什么区别

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

四、安装android studio

网盘下载地址:android studio3.1
android 官网下载地址

五、配置Android studio

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

react-native init TestApp --version 0.57.0
# 或
npx react-native init TestApp --version 0.61.3

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

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

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

# 低版本 0.60 之前安装的 react-native
react-native run-android 
# 或 0.60 发布以后都统一使用下面的命令启动
npx react-native run android
# 或
yarn android
# 或
npm run android

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

使用真机测试

  1. 接下来我尝试使用真机测试,使用真机测试需要打开开发者选项,每一种手机打开的方式不同,可以根据自己的手机查看;
  2. 如果你成功的完成了上面的操作,那么后面的就是使用数据线插到电脑上,此时可能会弹出一个对话框,选择存储,如果没有,可以选择滑下状态栏看看有没有,如果有就更改,如果以上两种都没有,那么说明你的数据线可能插得不好,或者不支持。
  3. 进入开发者选项里面,打开USB调试,
  4. 打开以后可能会弹出一个对话框,你选择确认即可;
  5. 在项目中同样运行上面的命令 yarn android 或 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.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
上面的index.js这个的看自己的项目,如果项目中有index.android.js和index.ios.js就将上面的替换成index.android.js

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

到这里你可能不能实时刷新,这样的话,参照这个博客React-Native项目在Android真机上调试

六、配置VScode,使其支持RN

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

七、使用android studio 打包可能会出现跟图片相关的问题

下面这个使解决方案,解决图片问题:android studio 打包出现图片问题,使用此教程,如果使其他问题,先clean,然后重新生成index.android.bundle,生成命令在上面。

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

七、使用VScode开启debug模式

配置debug模式网上很多教程,也比较简单,就是下载扩展,搜索react-native-tools,安装,然后点开debug,第一次可能提示没有配置debug,这个需要配置,选择配置,这个时候可能会出现一个文件,也有可能出现一个选择的对话框,出现对话框直接选择react-native即可,如果直接出现文件,launch.json文件,注意看文件右下角有一个“Add Configuration”,点击即可,然后选择debug android或debug ios,这样就可以了,至于出现的那些参数的含义,react-native-tools里面有说明,一般不需要特别配置里面的参数就能使用,默认跟在终端中使用react-native run-android差不多,配置好了以后再进入debug中,选择你配置中的那一项即可,然后等待启动,,如果出现错误react-native ERROR EPERM: operation not permitted,则按照下面这个博客的方法进行即可,我得提醒的是,在这开始之前,配置环境中的任何一步都走得对,如果仍然不行可以检查是不是有一步漏走了。react-native ERROR EPERM: operation not permitted解决方案

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容