React Native 开发(第一篇)

由于最近在研究Hybrid App的开发,又由于看到一篇文章讲到Hybrid 的过程中谈到了React Native,虽然之前有知道这个Facebook开源的项目,但是由于之前这个相关刚起步对android的支持不是很好,所有就没有实际动手开发。今天闲来无事就尝试来用React Native做一下 Hybrid App的开发。

1.首先是环境的搭建

   由于之前一直是android开发,所以android开发的环境都有,包括虚拟机genymotion,还有就是做过node.Js开发,也装有nodejs(nodejs版本是要求大于或等于4.0的 如果你本地的node版本旧了话 就去nodejs官网安装新的)

2.安装react native

$ npm install -g react -native -cli
以下是新建一个示例项目(自己可以先新建一个文件夹)
$ react -native init AwesomeProject

3.run android项目

  • $ cd AwesomeProject
  • $ react-native run-android
到这里  如果你的虚拟机或者真机开了 就会看到一个大红色的错误
像这样


点击Reload Js
会变成这样


解决方法:


还是 先cd到项目根目录
然后 npm start 等一会儿在reload js就行
结果




一个React Native 的项目就OK了


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前言 xi 第1章 初识React Native 1 1.1 React Native 的优点 2 1.2 风险和缺点 4 1.3 小结 4 第2章 React Native 工作原理 5 2.1 React Native 是如何工作的 5 2.2 渲染周期 7 2.3 在React Native 中创建组件 2.4 宿主平台接口 11 2.5 小结 12 第3章 构建你的第一个应用 13 3.1 搭建环境 13 3.2 创建一个新的应用 17 3.3 探索示例代码 24 3.4 开发天气应用 27 3.5 小结 40 第4章 移动应用组件 42 4.1 类比HTML 元素与原生组件 42 4.2 处理触摸和手势 46 4.3 使用结构化组件 58 4.4 平台特定组件 69 4.5 小结 74 第5章 样式 75 5.1 声明和操作样式 75 5.2 组织和继承 79 5.3 定位和设计布局 81 5.4 小结 91 第6章 平台接口 92 6.1 使用定位接口 93 6.2 使用用户图片与摄像头 6.3 AsyncStore 持久化数据存储 108 6.4 智能天气应用 109 6.5 小结 119 第7章 模块 120 7.1 使用npm 安装JavaScript 类库 120 7.2 iOS 原生模块 121 7.3 Android 原生模块 130 7.4 跨平台原生模块 139 7.5 小结 141 第8章 调试与开发者工具 142 8.1 JavaScript 调试实践和解释 142 8.2 React Native 调试工具 147 8.3 JavaScript 之外的调试方法 152 8.4 测试代码 158 8.5 当你陷入困境 160 8.6 小结 160 第9章 学以致用 161 9.1 闪卡应用 161 9.2 模型与数据存储 168 9.3 使用Navigator 177 9.4 探索第三方依赖 180 9.5 响应式设计与字体尺寸 180 9.6 小结及任务 183 第10章 部署至iOS 应用商店 184 10.1 准备Xcode 工程 184 10.2 上传应用 192 10.3 使用TestFlight 进行Beta 测试 199 10.4 提交应用审核 200 10.5 小结 201 第11章 部署Android 应用 203 11.1 设置应用图标 203 11.2 生成release 版本的APK 205 11.3 通过邮件或链接发布 207 11.4 提交应用至Play 商店 207 11.5 小结 214 总结 215 附录A ES6 语法 216 附录B 命令与快速入门指南 219 作者简介 221 关于封面 221

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值