前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >最新React Native环境搭建(从0到打包APK)

最新React Native环境搭建(从0到打包APK)

原创
作者头像
程序员海军
修改2021-10-09 09:50:34
4K0
修改2021-10-09 09:50:34
举报
文章被收录于专栏:前端笔记ing前端笔记ing

React Native 之旅

React Native 踩坑开始

5.1 假期 就这样短暂的结束了,你都干啥了? 😂,我嘛加了3天班,你们呢? 最近公司有个React Native 项目,不得不学习下RN了。由于之前学过React,学React Native 过程还算可以,不太艰难。 学习React Native 踩了好多坑,总结文章,以便别的小伙伴开发RN,可以轻松上手,减少踩坑。😂


React Native 环境 安装(必须按照以下3个要求配置安装,否则会环境错误)
  • Python 2.x , 必须安装2.x 的版本。
  • Node, 版本必须在12或者大于12
  • Java JDK 环境 必须为 1.8 版本

缺少Python 环境

项目依赖安装工具
  • 首选 yarn ,安装国外资源依赖快
  • Npm, 下载速度会很慢,可以设置淘宝源,加快速度
手机模拟器 调试
  • 安装 Android Studio (需要配置AS 的环境,这里就不介绍了)
  • 夜深模拟器
  • 其它模拟器


安装 React Native 脚手架

我之前是按照官方提供的脚手架安装的,出现各种坑,创建好了项目,启动项目,各种报错,最后各种百度,没果。 后来选择了EXPO,可真香。

官方提供 脚手架
代码语言:javascript
复制
1. 全局安装脚手架
npm uninstall -g react-native-cli
2. 创建新项目
react-native init  ProjectName
3. yarn start
安装 EXPO 脚手架
什么是EXPO

Expo是通用React应用程序的框架和平台。它是围绕React Native和本机平台构建的一组工具和服务,可帮助您从同一JavaScript / TypeScript代码库在iOS,Android和Web应用程序上开发,构建,部署和快速迭代。

安装脚手架
代码语言:javascript
复制
1. 全局安装 EXPO
 推荐用 yarn 安装//  
 npm install --global expo-cli
(当时用npm,安装了半个小时,也没安装完......😭)
​
2. 创建项目
expo init my-project
​
EXPO 提供了 很方便开发便捷

从项目的开发 到 最终的上线, 都很轻松。 当你想打包你的App 成APK 文件: 你可以是使用EXPO 提供的 指令: expo build:android 打包的时候,会需要EXPO的账户, 因为它会发布到你EXPO账户下,生成APK 文件 ,发布到应用商城,需要证书或者资料, 它会给你生成一个, 完全不用我们操心,只关注编码。

光说不练 纯耍流氓,下面为EXPO 操作演示
创建项目
下载依赖会需要一段时间
EXPO 项目介绍
启动项目 yarn start

启动成功后,它会开启一个服务,会自动打开一个网页,在这个网页中,你只需要把你的 手机模拟器 或者 真机 连着电脑, 然后 点击 Run on Android device 就可以运行在手机上了。 是不是很轻松哈,使用官方提供的,你的自己配置,查找模拟器。😝

React Native 支持热更新

这样很方便我们开发APP 中调试, 数据改变, 视图同时改变。

打包项目

由于我是Windows 环境,在这里就只介绍 如何打包 Android APK 文件了。 IOS 打包 去官方读文档也可以,文档可能对国人不太友好,纯英文,翻译工具可以帮到我们。

打包成功,它会提供一个链接,去这个链接你就可以下载打包后的APK 文件

下载APK
显示效果

到此该结束了

本章介绍了,如何配置React Native 环境, 以及EXPO 神器如何使用,从 0 到 打包成 APK 文件流程。 中间我踩了很多坑,写文章记录下来,别的朋友就可以减少踩坑的时间,专注业务开发方面,从而开发出优质的APP 应用。

祝大家,5.1 快乐

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • React Native 之旅
    • React Native 踩坑开始
      • React Native 环境 安装(必须按照以下3个要求配置安装,否则会环境错误)
    • 缺少Python 环境
      • 项目依赖安装工具
      • 手机模拟器 调试
      • 安装 React Native 脚手架
      • 安装 EXPO 脚手架
      • EXPO 提供了 很方便开发便捷
      • 光说不练 纯耍流氓,下面为EXPO 操作演示
      • EXPO 项目介绍
      • 启动项目 yarn start
      • React Native 支持热更新
      • 打包项目
    • 打包成功,它会提供一个链接,去这个链接你就可以下载打包后的APK 文件
      • 下载APK
    • 到此该结束了
      • 祝大家,5.1 快乐
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档