React Native 教程——手把手搭建开发环境
来源:互联网 发布:union软件下载 编辑:程序博客网 时间:2024/06/06 06:59
前言
开始学习RN后一路踩坑,很多次想过放弃,但是依然坚持了下来。遇到红屏,先试着去翻译读懂报什么错,耐心点解决积攒经验。今天就把自己的踩坑经验总结一下,为了大家避免重复踩坑,跟着我的一步一步慢慢来,很简单,主要是心态要好,哈哈!
学习参考
React Native中文网
搭建开发环境
(这里使用Android + macOS 进行搭建。)
- 安装Node.Js
第一步,首先是想办法下载Node到电脑上,需要 5.0或更高版本。下载后安装就行。
1、官网下载:https://nodejs.org/en/
2、命令符下载:
brew install node
最后,检测安装结果:( 如果出现版本数字标识,说明安装成功。)
node -v
- 下载测试项目
react-native init AwesomeProject这里有个坑:按下enter回车键出现停顿缓慢?如果没有可跳过。
解决方法:
1、用翻墙软件如蓝灯打开后重新下载即可。
2、把 NodeJs源码下载到本地,然后提取给 node-gyp,命令输入:bash node-gyp.sh 。
项目下载完成后,可以在Finder文件夹里找到,项目文件夹名称就是AwesomeProject。接下来,准备手机设备进行运行。
- 查看设备连接
确保你的设备已经成功连接。可以输入adb devices来查看:
$ adb devicesList of devices attachedemulator-5554 offline # Google模拟器14ed2fcc device # 真实设备
在右边那列看到device说明你的设备已经被正确连接了。注意,你只应当连接仅仅一个设备。
译注:如果你连接了多个设备(包含模拟器在内),后续的一些操作可能会失败。拔掉不需要的设备,或者关掉模拟器,确保adb devices的输出只有一个是连接状态。
如果没有设置过ADB,请先花1分钟时间跟着博文设置一下:mac环境下设置adb及command not fount解决方法然后,安装运行项目到设备,输入命令:
cd AwesomeProjectreact-native run-android
如果设备没安装上AwesomeProject,可直接用Android studio或eclipse开发工具打开AwesomeProject文件里的Android项目,点击run运行安装即可。
红屏报错解决:
java.lang.RuntimeException: Unable to load script from assets 'index.android.bundle'. Make sure your bundle is packaged correctly or you're running a packager server.
Application AwesomeProject has not been registered.解:首先,通过命令:ps aux | grep react-native 查看正在运行的进程,然后输入:launchPackager.command,再使用命令:kill加进程id 来结束该进程。另外需要注意的是AwesomeProject文件夹里有一个index.android.js的文件,里面一行代码就是Registry的关键地方。
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
注意,终端命令:react-native run-android ,会开启一个进程必须保持开着,不然红屏报服务没打开!!!!!!!
至此,设备上应该出现index.android.js文件里的text的文本信息了。如中途有其他情况,请在博客里留言,或加入我的群。
- React Native 教程——手把手搭建开发环境
- React Native开发环境搭建——window
- React Native学习(一)——搭建开发环境
- React native 开发环境的搭建 — mac平台
- 搭建 React Native 开发环境
- 搭建React Native开发环境
- React Native 搭建开发环境
- React Native开发环境搭建
- 搭建React Native开发环境
- React-Native开发环境搭建
- React Native搭建开发环境
- React Native 开发环境搭建
- React Native 搭建开发环境
- react Native搭建开发环境
- React Native搭建开发环境
- React Native搭建开发环境
- react-native开发环境搭建
- react native开发环境搭建
- CSS3 word-wrap和word-break长单词的换行
- 合影效果
- ECharts属性设置
- Sreekrishnan Venkateswaran 大师对嵌入式学习的看法(摘抄)
- java 按值传递与引用传递 略解
- React Native 教程——手把手搭建开发环境
- 战争迷雾
- redux数据操作
- JAVA 文本特征提取
- SHELL命令
- 整数的编码与存储
- 自行编写线性回归对房价进行预测
- 已经录制的专业
- Android Studio连接海马玩模拟器