因为开发需要要在自己的台式机上搞个react-native环境开发app,折腾了好一会儿,觉得有很多细节还是要记一下。
首先说明,本人使用的是react-native-cli
插件思路,搭建所有的环境第一步就应该(强烈建议)查阅官方文档教程(先查一下,没有再论),不建议在网上找个人教程来看(嘿嘿~~~),大家说的参差不齐,有时很容易越搞越麻烦,基本情况下,官方都不会吝啬文档,其好处就是全面,保鲜,所以先到react-native的官方教程去看下:react-native搭建开发环境官档
首先选择自己的平台,我的是windows,就只能构建Android项目,ios的话非买个苹果不可
既然有官方教程我就不一一往下复制了,没啥意义,但是走完所有步骤后我是选择夜神模拟器的,AS(Android studio)自带的还是比较吃CPU,用起来卡的要死,远不如夜神,或者mumu也行,官方说的可以用什么加速器之类的我就看看就行,麻烦的要死
选择夜神就有连接夜神的问题,正常情况是连不上的,
先打开夜神模拟器放着,然后打开命令行cd到夜神的bin目录下运行nox_adb.exe connect 127.0.0.1:62001
意思就是连接AS,这样在AS里run的时候就能检测到模拟器了
这时可以尝试运行下:
一:项目根目录npm start
二:打开AS,打开项目时选择根目录下的android就行,第一次会花些时间加载组件,无报错表示成功(报错就按提示来,一般会告诉我们缺啥,下面点下就能自动补上)
三:run,找不到模拟器就再运行下上面的nox_adb.exe connect 127.0.0.1:62001
(注意当前位置)
四:一般就成功加载欢迎页面了
但是…
我碰到了unable to load script from assets ‘index.android bundle’ ,make sure your bundle is packaged correctly or youu’re runing a packager server
这样的错误,意思大概就是没有index.android bundle
这个玩意儿,到项目文件看看确实没有,再在网上一查,说要新建一个assets
文件夹到项目的android/app/src/main
里,再在根目录运行下面的命令:
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
就行了,为了方便在下面贴出来(就隔一个词):
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/
然后重新run
,就成功看到欢迎页面了
上面连接夜神的临时命令每次都要翻文件夹太麻烦,把它做成命令文件比较好,windows里就是.bat
啦,新建一个to_yesheng.bat
文件里面添加如下内容:
[夜神安装目录路径]\Nox\bin\nox_adb.exe connect 127.0.0.1:62001
文件就放命令行入口位置就行,打开命令行就能用,敲文件名to_yesheng
就行(最后还有可能因为nox_adb.exe文件问题连不上夜神,只要将Android SDK里面的adb.exe文件复制替换到夜神的bin目录下就行了,这样就统一了参数)
成功搭建环境关键还是要看官方文档,基本问题不大