开始使用React Native的详细指南

764 阅读8分钟

什么是React Native

React Native是一个JavaScript框架,用于为iOS和Android平台编写混合原生移动应用程序。React Native使用与浏览器开发相同的JSX和React开发方法,但应用程序被React Native工具化为Objective-C(用于iOS)或Java(用于Android)的本地应用程序。

React Native与其他JS移动框架(如Ionic或Cordova)的关键区别在于,其结果是一个混合的本地应用程序,而不是利用Web视图的混合Web应用程序。React Native仍然使用JS引擎来执行你的应用代码,但将你的视图编译成本地代码,并使用一个桥梁在线程之间进行通信。因此,它的外观和感觉就像任何其他本地应用程序,并受益于强大的性能和对设备API的访问。

为什么你要使用React Native

React Native允许你用跨平台的代码针对iOS和Android平台,利用你的网络开发团队可能已经熟悉的技术和模式。创建一个屏幕就像编写一个接受道具并使用<文本>和<视图>等react-native特定标签的react组件一样简单。开发人员可以使用Redux等包来存储应用程序的状态和CSS Flexbox来布局内容。

React Native使用原生UI元素来提供原生用户体验,这是混合网络框架难以实现的。这在动画和表单输入方面尤其明显。

React Native拥有很好的开发者体验,只需很少的设置;诸如热重载、元素检查、调试工具和有用的错误信息等功能都被提供。由于React Native应用程序是用JavaScript(或TypeScript或Flow等变体)编写的,开发者能够在移动设备或模拟器上运行他们的应用程序时,在他们的IDE中做出改变,并看到应用程序实时更新和刷新,而不需要重建和部署整个应用程序。

因为React Native允许在网络、iOS和安卓平台之间共享大量的代码,所以跨平台开发所需的代码和资源应该减少。更重要的是,你将不一定需要特定的移动应用程序开发人员,因为你的开发人员将能够用同样熟悉的网络技术在所有目标设备上工作。

开始使用React Native

使用expo

开始使用React Native的最快速和最简单的方法是通过expo cli。Expo是一个围绕React Native建立的工具链,允许你快速入门,而不需要设置Xcode或Android studio。允许你在几分钟内启动和运行,并提供访问大量的设备API和有用的包来建立一个应用程序。要做到这一点,只需运行:

npm install -g expo-cli
expo init my-expo-app
# make project choices
cd my-expo-app && npm start

这将安装Expo cli,初始化一个项目并启动开发服务器。现在你需要做的就是在你最喜欢的IDE中进行修改,并看到它们反映在你的模拟器或移动设备上。使用Expo的主要缺点是,你不能使用Expo客户端应用程序所不提供的任何自定义本地模块:

使用react-native cli

假设你已经安装了Xcode和/或Android studio,你可以通过运行创建一个初始的React Native应用程序:

npx react-native init my-cli-app
cd my-cli-app && npx react-native run-iOS

如果你还没有安装cocoa pods和watchman,你会被提示这样做。一旦你开始运行,你应该有一个与expo方法类似的设置,尽管你将能够打开Xcode项目,以便使用自定义的本地模块并构建和发布你的应用程序:

在React Native中使用TypeScript

但是TypeScript是什么?你可能已经注意到在你使用expo cli的设置过程中,在初始化向导中为TypeScript提供了一个选项。只需选择TypeScript,你就会得到一个TypeScript的React Native项目,并准备好开始使用。

如果你使用的是react-native cli,那么有一个特定的TypeScript模板,你可以使用它来启动和运行:

npx react-native init my-ts-app --template react-native-template-typescript

这个命令创建了一个完全工作的React Native TypeScript启动程序。使用上述任何一种方法,你将能够像使用JavaScript一样开发你的TypeScript应用程序,并从相同的开发人员经验中受益,但增加了TypeScript支持而不是Flow。

构建和发布你的应用程序

如果你使用Expo来构建你的应用程序,那么你就可以使用expo构建工具来构建和打包你的iOS/iPadOS和Android应用程序。这是很直接的,使用基于云的构建平台来创建你的应用程序二进制文件。然后你可以把这些二进制文件上传到相应的应用商店,或者通过TestFlight等把链接发送给你的测试人员进行测试。

如果你使用了React Native cli或从expo退出,那么你将需要使用Xcode和Android studio来执行应用程序的构建,然后再将它们上传到各自的应用程序商店。

执行发布本身,就像任何原生应用程序一样,可能会变得相当繁琐,因为你需要创建屏幕截图,执行代码签名,等等。幸运的是,你可以使用Fastlane来自动化这一过程的大部分内容。Fastlane允许你为测试版或应用商店发布设置特定的规则,并自动进行测试、生成屏幕截图、代码签名,甚至将你的应用上传到应用商店进行审查。

但是,关于更新呢?如果你使用expo,这里有一个好消息,因为你可以选择接受空中(OTA)JavaScript更新到你部署的应用程序,而不需要为每个更新经历整个应用商店审查过程。这是一个很好的解决方案,可以在一个小的开发窗口内向用户推送小的错误修复和性能增强。这在你希望快速响应反馈的测试阶段尤其有效。

如果你不使用expo,那么OTA更新仍然可以通过Microsoft App-Center codepush等服务来实现,但这需要额外的设置和配置。

什么时候不应该使用React Native

如果你想进入原生移动开发,并希望利用你的团队现有的React和Web开发技能,React原生是一个很好的解决方案。这种方法的局限性在很大程度上取决于你的需求;如果你想使用先进的设备硬件交互,你可能会发现没有合适的软件包或API可以实现,因此你必须编写一个自定义的原生模块来使用你的应用程序。考虑到这一点,你可能仍然需要编写一些Objective-C和Java代码来实现你的目标。

React Native大大减少了你为iOS/iPadOS和Android应用提供服务所需的代码量,但在某些情况下,你可能会发现由于本地组件的差异,你需要为任何一个环境编写特定的代码。例如,当创建一个选择/选取器时,iOS/iPadOS和Android的外观会有所不同,因为前者会渲染一个滚动轮,而后者会生成一个下拉菜单。这些类型的差异将需要自定义逻辑,以根据你的需求正确渲染和行为,并将利用你的开发团队的知识和技能。

接下来的步骤

现在你已经开始了,你会想继续用架构功能(如数据存储、路由和组件库)构建你的应用程序。

react-navigation为React Native应用提供了一个路由解决方案,允许你创建几种不同的应用布局和导航范式,包括页眉、标签和堆栈容器。这是一个很好的方法,可以以一致的方式建立你的应用程序屏幕和视图,与你的应用程序一起成长。

对于数据存储,如果你已经熟悉Redux,你可以考虑为你的React Native应用程序使用redux-persist。它可以很好地作为你的应用程序的备份存储,以及增加将存储的部分序列化到终端用户设备上的能力。这允许你的应用在应用关闭后将认证令牌和收藏夹保存到设备上,这样用户在重新打开应用时就可以恢复他们完成的工作。

React-native-elements提供了一个UI组件集合,用于React Native应用程序,以实现在iOS/iPadOS和Android上的一致外观和功能。这些组件包括卡片、输入、列表、头像和徽章等。使用这样的包将有助于消除你的目标平台之间的差异,使你的团队能够在最短的时间内建立你的应用程序。