React Native---iOS开发学习

最新推荐文章于 2024-05-30 00:23:17 发布
置顶 最新推荐文章于 2024-05-30 00:23:17 发布
阅读量795 收藏 1
点赞数 1
分类专栏： react-native 文章标签： react-native react-native入门与实战 iOS混合开发

作为一名iOS开发者，断断续续一年前开始接触React Native，最近由于工作需要，专职学习React Native也有一个多月了。网络上知识资源非常的多，但能让人豁然开朗、迅速学习的还是少数，我整理出的这些文章对于初学者来说是比较有好的，希望通过整理我的学习路线，能给同样作为iOS开发者，想学习React Native的朋友们一些帮助。

既然是写给iOS开发者的，那么我默认你已经掌握iOS原生应用开发的基本知识，所以对iOS原生开发的相关内容不做解释说明。

React Native概念介绍

名词解释

  • 首先列举几个关键词：

    • React

    • Native

    • React Native

  • 这三个词其实没有太大关系，我们逐个来解释：

    • React：近几年Web前端领域非常火热的一个开发框架React.JS，其核心思想是将视图组件化，通过更新组件的state来渲染出组件。
      Native：这个词从字面理解就够了，就是指原生的。前几年有个非常火热的跨平台开发框架– PhoneGap（现称Cordova），那就不是原生的开发方式。原生就要使用对应平台的特定语言和框架进行开发，比如使用Objective-C或Swift开发的iOS应用。

    • React Native：结合了这两个词，我们可以简单地得到结论：使用React框架进行原生方式的开发。

实现原理

我们都知道在iOS平台上，苹果提供了一个JavaScriptCore的framework，可以进行JavaScript语言的解析，React Native通过多次封装定义，最终实现了在JavaScript语言中调用Objective-C的类和方法。具体的原理我们现在还不必深究，后文的学习路线中会有提到。
所以既然是调用Objective-C的类和方法，性能上当然是不差的（但也不完美），所以这也是React Native相比其他跨平台开发方式的一大优势。

评价

  • 跨平台：目前React Native官方已经支持iOS、Android两个平台的移动设备，民间也有一些大牛在做macOS、tvOS，甚至UWP平台的适配。但由于不同平台特性不同，并不能一份代码在所有平台上直接运行，React Native的思想是「Learn once, write anywhere」，我们需要针对不同平台的特性写出不同的代码，尽量保持组件的高可复用性。

  • 性能：官方宣称性能堪比Native，实际使用中我们会发现几个问题，比如复杂视图渲染出View层级过多、ListView（等同于iOS上的UITableView）无重用机制、有些组件存在内存泄露。这就会导致在部分低端Android机型上的性能过差，复杂的、大型的应用会有明显性能问题。

  • 热更新：由于App Store应用商店发版迭代效率问题，热更新成为了iOS平台非常渴求的功能，可喜的是React Native的热更新能力非常好，通过将JavaScript代码部署到服务器中，运行过程中即可重新reload整个界面。(PS:目前热更苹果已经出台针对措施！)

  • 学习成本：对于iOS开发者来讲，要了解相当数量的Web前端开发知识才可以进行开发，对于Web前端开发者来讲，对于原生性能调优则需要原生开发知识和经验，所以说学习成本略高。

  • 开发效率 ：Android和iOS平台可复用很多组件，仅部分代码需要各自平台分别维护，所以比开发两个平台原生应用效率要高得多。加上本身可动态渲染的能力，不用重新编译，Command⌘+R即可重新渲染界面，开发效率更是惊人地快。

学习路线

按照顺序进行学习即可

React Native

快速入门
布局
组件
React with Redux
热更新
原理
推荐资源
最后附上原文链接:

talisk斯温的技术博客](http://blog.talisk.cn/)

BearsG
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
react-native-permissions:适用于iOS和Android上React Native的统一权限API
04-13
:index_pointing_up_medium-light_skin_tone:React本机权限 适用于iOS，Android和Windows的React Native的统一权限API。 （对于Windows，仅支持内部版本18362和更高版本）支持版本React本机版本Xcode版本3.0.0+ 0.63...
超详细 React Native 入坑使用指南，我在元宇宙等你
qq_15041931的博客
12-19 8516
前言 大家好，我是虚竹，今天给大家分享一下我是如何快速通关打怪搭建 React Native 跨端开发环境，并使用大家非常熟悉的开发工具 VSCode 来编写丝滑般的代码。编写丝滑般代码会再下一篇输出，包括项目实战经验总结和踩坑，如目录架构、函数式编程、React Hook 灵活运用、常见场景、开发调试、发布部署、踩坑、性能优化等等。 之前因为在我的技术群，收到群友@我，问能否出一个保姆级 React Native 搭建开发环境的教程，我说照着官方文档步骤操作即可。可惜事与愿违没那么顺利，流程上繁琐不够清晰
ReactNative入门
SeaState的博客
02-05 2567
简要介绍 什么是 ReactNative？ React Native （以下简称 RN）是 Facebook 研发并开源的应用框架，由 React 和应用平台的原生功能组成。RN 的主要编程语言是 JavaScript（以下简称 JS），所以可以使用后端强⼤的 Web 方式管理，做到既能⾼效开发，又可以实现快速部署和热修复。 RN 的优缺点 优点： 容易上手: RN 入门较轻松，只要有一门面向对象语言的基础，都可以很快上手，而且社区较活跃，很多资料在网上都能查到。 垮平台开发 ：相比原生的ios 和
ReactNative集成到已有iOS项目
最新发布
Care iOS技术团队
05-30 547
最近在维护一个项目，需要引入ReactNative开发新UI。记录一下过程，表示我搞过。需要安装node环境接着创建一个目录用来保存工程文件，并在目录项目下面创建一个package.json文件加下来安装react native必须的库, 0.71.7版本是支持xcode14.2的，大于这个版本就需要xcode14.3了，我的电脑是MBP 2015 Mid，只能升级到xcode14.2，所以也只能用这个react-native版本。
React Native 环境搭建----Andriod端
m0_47745235的博客
10-23 3132
详细！！！React Native 环境搭建----Andriod端（window11系统）
前端程序猿的天花板？react-native开发及调试方案（真实项目，建议收藏）
2401_83330193的博客
03-29 975
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可获取你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难。
React Native简介和环境配置
2401_84091993的博客
04-20 1046
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可免费领取！由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可免费领取！[外链图片转存中…(img-TVEpZ3CE-1713552017155)][外链图片转存中…(img-VpSkvLmc-1713552017155)]
react-native-nfc-manager：用于Android和iOS的React Native NFC模块
02-04
react-native-nfc-manager 将NFC功能引入React Native。 受和启发 欢迎捐款！ iOS 14模拟器问题 如，使用CoreNFC时，iOS 14模拟器将崩溃，但是实际的iOS 14设备可以工作。 安装 # RN >= 0.60 npm i --save react-...
react-native-exit-app：完全针对iOS和Android上的React Native的退出，关闭，杀死，关机应用程序
02-05
注意： 对于React Native <0> 0.47，请使用react-native-exit-app> = 1.xx建立快速简便： npm install react-native-exit-app --savereact-native link react-native-exit-app 或手动：将最新版本视情况添加到...
react-native-picker-modal:一个React Native Picker，模仿iOS在iOS中的实现，而无需更改原始API
05-18
一个React Native Picker，模仿iOS在iOS中的实现，而无需更改原始API。 它在Android上使用React Native的Picker ，并在iOS上的Modal使用显示Picker Text 。 安装 npm i react-native-picker-modal --save // OR yarn...
react-native-image-resizer：with使用React Native调整本地图像的大小
01-31
一个React Native模块可以创建本地图像的缩放版本（也支持iOS上的资产库）。 React性的 React本机图像调整器 ≤0.60 1.1.0 0.61 1.2.0 建立 安装软件包： React本机> = 0.60 yarn add react-native-image-...
practical React Native
11-17
Discover how to use React Native in the real world, from scratch. This book shows you what React Native has to offer, where it came from, and where it’s going. You’ll begin with a solid foundation of practical knowledge, and then build on it immediately by constructing three different apps. You’ll learn how to use each feature of React Native by working on two full projects and one full game. These aren’t just simple React Native Hello World examples (although you’ll naturally start there!) but are apps that you can, if you so choose, install on your mobile devices and use for real. Throughout this book, you’ll gain real-world familiarity with React Native as well as supporting components from Expo, NativeBase, React Navigation and the Redux and Lodash libraries. You’ll also build server-side code for a mobile React Native app to talk to using the popular Node.js and Socket.io library, providing you a holistic view of things even beyond React Native. And, you’ll see many helpful tips, tricks and gotchas to watch out for along the way! Practical React Native offers practical exercises that will give you a solid grasp of building apps with React Native, allowing you to springboard into creating more advanced apps on your own.Creating a game with React Native will allow you to see a whole other perspective on what React Native can do. What You’ll Learn Master the basics of React Native Create a logically structured project Review interface elements, such as widgets, controls, and extensions Build layouts Work with Expo, an open source toolchain Who This book Is For The primary audience is mobile developers and anyone looking to build for multiple mobile platforms and trying to do so with a codebase that is largely the same across all. Readers will need a decent foundation, but not necessarily be experts in, HTML, CSS, and JavaScript, but I’ll assume little beyond that.
React and React Native
07-19
React-Native利用web应用和Native的优势，用JS来实现移动端的应用。利用React的原生UI组件代替DOM的渲染，实现了一种只用一种开发语言便能高效的开发出一款与平台无关的app
react native
03-01
react native es6的开发注意事项，react native es6的开发注意事项react native es6的开发注意事项react native es6的开发注意事项
React Native 介绍
qq_27494201的博客
12-29 9826
文章目录一丶React-native是什么二丶React Native引进原因三丶React学习需要的知识四丶React三个特点五丶React-native的优缺点六丶React-native的机制特性七丶React-native的工作原理八丶React Native开发流程九丶对React-native的看法十丶React-native学习资料 首先要声明一下，这篇文章是借用下面两位优秀的博主博客制作，这里要像两位优秀的博主表示真挚的感谢！ 小水滴2014 Joan_Vivian 一丶React-nati
React Native环境配置搭建（史上最详细教程）
热门推荐
m0_65892856的博客
05-21 1万+
安装RN环境卡了我好久，在网上搜了很多都不全遇到很多问坎儿，时至今日我终于装好了，打算写一个详细过程造福大众，也算是对自己总结更深层的记忆。 1.首先看官网React 注意要点：必须要有node，javaJDK和AndroidStudio。 再分别看这三者的条件： （1）node必须在14以上，可以去[ node官网](http://nodejs.cn/)下载，我这里用的是NVM。 NVM教程 搞好之后检查：cmd执行命令： node -v ![image.png](https:...
React Native开发环境搭建详细步骤
Asafoetida的博客
03-21 7899
安装依赖​ 必须安装的依赖有：Node、JDK 和 Android Studio。
React-native基础介绍
mapbar_front的博客
08-18 1815
JSX语法如果仅仅是开发react/react-native，个人觉得，没必要专门学习什么是jsx，我们只需要它的一些基本的知识就足够了。jsx语法，一定要记住这样的一句话，它是把HTML模板和JavaScript进行混写的一种语法风格。使用<>来写HTML，使用{}来写JavaScript。jsx的基本语法规则就是：遇到HTML标签（以 < 开头），就用HTML规则解析，遇到代码块（以 { 开头）
安装 react-native-picker 命令
07-12
要安装 react-native-picker，你可以按照以下步骤进行操作： 1. 打开终端或命令行窗口。 2. 进入你的 React Native 项目的根目录。 3. 运行以下命令来安装 react-native-picker： ```shell npm install react-native-picker --save ``` 或者如果你使用的是 Yarn 包管理器，可以运行以下命令： ```shell yarn add react-native-picker ``` 4. 安装完成后，你需要链接 react-native-picker 到你的项目。运行以下命令： ```shell npx react-native link react-native-picker ``` 或者使用自动链接（React Native 0.60+）： ```shell cd ios && pod install && cd .. ``` 这将自动将 react-native-picker 链接到你的 iOS 和 Android 项目中。 5. 最后，重新构建你的项目。你可以运行以下命令来重新构建 Android 项目： ```shell npx react-native run-android ``` 或者运行以下命令来重新构建 iOS 项目： ```shell npx react-native run-ios ``` 完成以上步骤后，你的 react-native-picker 应该已经成功安装并链接到你的 React Native 项目中了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值