RN：app开发入门指南

已于 2022-02-23 10:11:10 修改
阅读量1.8k 收藏 1
点赞数
分类专栏： # app & react native 文章标签： react native react.js javascript
于 2022-02-22 16:46:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43972437/article/details/123062818
版权

这篇文章主要带大家了解一下 app 开发的一个流程，方便后续想要做 app 的同学了解学习，接下来我会以一个前端的视角介绍 app 开发的一些情况~

学习路线

js：
React17：app 开发基础语言
React Native（RN）：app 跨端开发方案
TypeScript（TS）：强类型 JavaScript
mobx-state-tree（MST）：状态管理库
ignite：脚手架

android：
java：android 开发语言
Maven：包管理工具
Gradle：构建工具
adb：调试工具
Android Studio：编辑器

ios：
Objective-C：ios 开发语言
CocoaPods：包管理工具
Xcode：编辑器

android 和 ios 中的技术栈不需要深入去学，了解、会简单使用就行。

调试工具：
React Native Debugger

app开发流程

1、搭建环境

你可以看：官方文档搭建环境
也可以看这篇实操：RN：搭建开发环境

2、启动/调试项目

RN：真机调试&无线调试

3、发布测试/生产

普通发布

RN：app自动化上传蒲公英、Test Flight、App Store等多个平台

热更新

RN：pushy热更新

Lvan的前端笔记
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
超详细 React Native 入坑使用指南，我在元宇宙等你
qq_15041931的博客
12-19 8005
前言 大家好，我是虚竹，今天给大家分享一下我是如何快速通关打怪搭建 React Native 跨端开发环境，并使用大家非常熟悉的开发工具 VSCode 来编写丝滑般的代码。编写丝滑般代码会再下一篇输出，包括项目实战经验总结和踩坑，如目录架构、函数式编程、React Hook 灵活运用、常见场景、开发调试、发布部署、踩坑、性能优化等等。 之前因为在我的技术群，收到群友@我，问能否出一个保姆级 React Native 搭建开发环境的教程，我说照着官方文档步骤操作即可。可惜事与愿违没那么顺利，流程上繁琐不够清晰
React Native环境配置搭建（史上最详细教程）
m0_65892856的博客
05-21 9738
安装RN环境卡了我好久，在网上搜了很多都不全遇到很多问坎儿，时至今日我终于装好了，打算写一个详细过程造福大众，也算是对自己总结更深层的记忆。 1.首先看官网React 注意要点：必须要有node，javaJDK和AndroidStudio。 再分别看这三者的条件： （1）node必须在14以上，可以去[ node官网](http://nodejs.cn/)下载，我这里用的是NVM。 NVM教程 搞好之后检查：cmd执行命令： node -v ![image.png](https:...
瑞能微计量芯片RN2026的实用程序
qq_36412526的博客
08-01 611
瑞能微计量芯片RN2026的实用程序,功能已经过验证,供大家参考,也可以稍加修改用到自己的产品中
创建RN Demo
qq_19766955的博客
11-26 154
创建Rn Demo
React-Native 创建App项目
m0_63685436的博客
04-09 1488
react-native 的学习
RN 入门(二)—基础知识
zcmain的专栏
12-19 3099
文章目录生命周期Mounting-装载1.1 constructor1.2 `UNSAFE_componentWillMount`1.3 render1.4 componentDidMountUpdating-更新2.1 `UNSAFE_componentWillReceiveProps`2.2 `UNSAFE_componentWillUpdate`2.3 componentWillUpdate...
使用新版本react-native 0.71快速开发APP项目详细介绍(ts+zustand+react-navigation+react-native-vector-icons)
搬砖狗-小强的专栏
07-18 1100
使用新版本react-native 0.71快速开发APP，初步实现了登录、首页、设置和一些demo模块，并自定义了一些通用组件。其中包含路由组件，文本框组件，单元格组件，按钮组件，表格组件和弹窗选择组件简单案列，这些组件都是最简单的实现，是给新手朋友参考学习的。后期可以根据自己需求拓展。本项目使用了比较新版本的rn框架（0.71），并且使用了ts框架开发。状态管理库没有使用react reducer，使用了Zustand: 一个轻量、现代的状态管理库（类似vue中的Pinia）。
RN入门教程-1
xiaomengzi的博客
02-24 895
RN入门教程 1、原生页面 tv?.setOnClickListener { optRouterService<ReactNativeRouterApi<OptRouter>>() .getRNRouter(RnModel(page = "ScreenManifest跳转的name值)) .lunch() } 2、RN页面 1）创建TypeScript File — TypeScript File（没有布局 mode
app_chamada_rn：app para auxiliar chamada em sala de aula
02-18
app_chamada_rn 昌达（Ala）教堂（Aala） pro je criado comintegraçãoeu firebase（para pushNotification）...
RNApp:React本地应用
05-08
RNAppreact native appgit clone yarn installreact-native run-andorid/ios1：下拉刷新(使用) android可以使用原生下拉刷新2：rn webview与H5交互3：react navigation自定义tab实现凸起效果(ios&&android)4：...
app_atencionnaves_rn:AGUNSA AMS应用
04-07
app_atencionnaves_rn
iOS原生与RN混合开发，入门Demo示例.zip
最新发布
02-08
IOS开发
rn-appstarter:RN App-我的方式
04-18
React Native App入门 我的方式。 文件资料 先决条件 应用 执照 有关详细信息，请参见。
可能是最全的h5唤起App方案
热门推荐
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
11-08 1万+
背景 调研 h5 唤起 App 方案 目的：引导已下载用户打开APP，引导未下载用户下载APP。 先说结论 ios9 及以上用 Universal Link（uc/qq浏览器不支持，不过safari占比最大） android6及以上用applink（chrome和小众浏览器支持，市场占比还是比想像中大的） 其它情况scheme（各种限制及弹窗确认） 微信ios7月的版本已经支持ulink了，android还是乖乖走应用宝吧（引导出微信也行，效果不好） ok，接下来我们一个一个聊 URL Scheme 有
RN：React Native原理以及新架构JSI、Fabric等概念
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
02-12 1万+
说明 RN需要一个JS的运行环境， 在IOS上直接使用内置的javascriptcore， 在Android 则使用webkit.org官方开源的jsc.so。 此外还集成了其他开源组件，如fresco图片组件，okhttp网络组件等。 RN 会把应用的JS代码（包括依赖的framework）编译成一个js文件（一般命名为index.android.bundle), , RN的整体框架目标就是为了解释运行这个js 脚本文件，如果是js 扩展的API， 则直接通过bridge调用native方法; 如果是UI
h5微信支付报错：商家参数格式有误，请联系商家解决
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
10-13 1万+
问题 h5微信支付报错：商家参数格式有误，请联系商家解决 解决 官方给的解决方案是：https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_4 因为我用的是 react native，改的话需要去改 node_modules里面的 react-native-webview 包的源码。 网上也有人说，直接这样设置： <WebView style={{ width: '100%', height: '100%' }} source={{
webview原理和JSBridge
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
02-09 6078
webview是一个嵌入式的浏览器，我们平常使用频率最高的就是客户端内嵌的webview 特点：运行在webview中的JS代码有能力调用原生的系统API，没有传统浏览器沙箱的限制。 目前javascript和客户端（后面统称native）交互的常见方式有两种 JSBridge schema JSBridge 当我们在native内打开m页，native会在全局的window下，为我们注入一个Bridge。这个Bridge里面，会包含我们与native交互的各种方法、比如判断第三方App是否安装、获取网
RN：App版本更新提示方案
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
12-23 3488
android 1、app内下载原生包并安装？ 2、如何跳到对应的应用市场？ 跳应用市场 没有应用市场则直接下载文件，是否跳腾讯应用宝等通用的市场 2、热更新方案选型？ 选择官方推荐的pushy 步骤： 1、打包一个基础的android包 2、把包上传到pushy，同时这个包分发给用户使用，此时版本为代码中写死的版本 3、当需要更新包的时候，本地改代码后执行pushy的命令生成一个增量包上传到pushy后台，上传的时候可以命名版本 3、热更新之后版本怎么控制？ 目前看来热更新的版本是维护在pushy后台的
RN：使用react-native-exit-app退出app
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
12-21 3345
背景 我们做 app 开发的时候，有时需要点击按钮退出app。比如不同意隐私协议的时候。 react-native-exit-app import RNExitApp from 'react-native-exit-app'; ... RNExitApp.exitApp(); ... 看了下源码，是这样退出的： android @ReactMethod public void exitApp() { android.os.Process.killProcess(android.os.Process
如果我的HQFC-BY仿真系统的指令如下 请问我应该怎么建立它的问题规模原始指令： MOV Rd, Rn：将寄存器Rn中的值移动到寄存器Rd中。 ADD Rd, Rn：将寄存器Rn中的值加到寄存器Rd中。 SUB Rd, Rn：将寄存器Rn中的值从寄存器Rd中减去。 AND Rd, Rn：对寄存器Rd和寄存器Rn进行按位与运算。 OR Rd, Rn：对寄存器Rd和寄存器Rn进行按位或运算。 XOR Rd, Rn：对寄存器Rd和寄存器Rn进行按位异或运算。 JMP Addr：跳转到指定地址。 HLT：停机指令，停止程序运行。 新指令： MUL Rd, Rn：将寄存器Rn中的值和寄存器Rd中的值相乘，并将结果保存在寄存器Rd中。 DIV Rd, Rn：将寄存器Rd中的值除以寄存器Rn中的值，并将结果保存在寄存器Rd中。 NOT Rd：对寄存器Rd进行取反操作。 LSHIFT Rd, Rn：将寄存器Rd中的值逻辑左移n位。 RSHIFT Rd, Rn：将寄存器Rd中的值逻辑右移n位。 CALL Addr：调用指定地址处的子程序。 RET：从子程序中返回主程序。 INT n：触发n中断。
05-29
为了建立HQFC-BY仿真系统的问题规模，需要考虑以下因素： 1. 指令集的大小：HQFC-BY仿真系统有10个指令，分别是MOV、ADD、SUB、AND、OR、XOR、JMP、HLT、MUL、DIV、NOT、LSHIFT、RSHIFT、CALL、RET、INT，指令集的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Lvan的前端笔记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值