2.1-react-native

Create by fall on 17 Dec 2022
Recently revised in 27 Nov 2024

React Native

对比 react

React Native 保证的相同的部分：

几乎所有的应用代码都使用 Javascript（或 Typescript）可以继续使用和 js 库，并且是真正的原生开发（无论是 IOS，还是 Android。

这些平台的代码都可以共享

核心 React API，和概念
React 构造理念（状态管理
React 性能最佳实践
第三方工具
纯 js 库

一些不同：

硬件环境、布局样式、带有 CSS 的库无法使用、库的不同（Reactive 中不存在 HTML）、导航、开发环境和开发者经验、性能优化、应用部署和发布

React Native 使用 Yoga engine 可以让你使用 css 的属性处理布局

但是没有 grid、display 属性

xbox 也是使用 RN 开发的，因为原来有一套 React 写的代码， RN，Android iPhone，是 Meta 维护的 RN，Windows，Mac 是 Microsoft 维护的

为什么不适用 electron 做 app？RN 提供了更好的性能支持以及更小的打包大小

Expo

Expo 是一个 react native 的框架。

a collection of tools and services that bridge the gap between what React Native ships with, and everything else needed to build production-ready apps.

收集了许多开发时用到的工具

react native 包括了一系列的内容：最基本的组件 <text>、view、TextInput 等。

Expo 在此基础上添加e俩更多内容：导航（navigation）、通知（notifications）、手机相机（camera）、持久化数据存储。

当使用 Expo Go 开发的时候，会绕过 build 限制（证书要求）因为使用的是公共的 app。方便学习，而不是枯燥的本地配置。因此，我们建议使用 Development Builds 对于生产构建。

代码对比

web：

export function MyTextComponent() {
  return (
    <div>Hello, web!</div>
  );
}

react-native

import { View, Text } from "react-native";

export function MyTextComponent() {
  return (
    <View>
      <Text>Hello, native!</Text>
    </View>
  );
}

原生概念

对于 web 转 native 来说，有一些内容与 web 不同：

构建证书

IOS 和 Android 有安全验证，阻止用户安装未认证的资源，为了安装，你需要一个 数字证书

android key 可以在你的机器上生成，
IOS 则需要一个付费的 apple 开发者账户

如果使用 EAS CLI 证书会自动生成。

Deep linking

在移动端，你会注册一个 scheme，你的应用会监听改内容。

如果你的路径像 myapp://my/page 将会打开你的应用，并且给你一个 my/page 来指示深链接到哪个路径。这都由你决定。如果使用 expo router，会根据文件系统生成路由。

手势和触摸

如果你想要你的应用由本地一样的体验，你需要利用，滑动，长按，缩放。

react native 提供了 onLongPress 和 React Native Gesture Handler 来构建更加复杂交互的原生应用。

触觉

一些震动，有节制的使用触觉反馈是很重要的

屏幕键盘

如果你的应用需要处理任何关于输入的内容，当启用键盘的时候，你需要考虑一些内容

确保当输入内容时，你的键盘展开后，input 仍然可见 KeyboardAvoidingView
当聚焦到 input 时，需要自动打开键盘，但也可以程序化的开关
当点击外部区域的时候，input 是否展示，可以使用 keyboardShouldPersistTaps 属性
使用 keyboardType 控制展示哪种输入类型，比如字符或数字，可以选择一些包括 autoCapitalize，autoComplete，autoCorrect，returnKeyType.

动画

RN 中不存在 CSS 动画，取而代之的是 Layout Animation 以及 Animated。构建自己的动画时，基于 react 的 Reanimated 比基于 react native 的 API 更好用。

像素密度

像素密度决定多少像素组成一个点，在移动端，不使用 px，em 等，而是使用 dp 表示一个点，多少个像素组成一个点，取决于设备。你可以通过 PixelRatio 来获取像素密度。

当渲染图像时尤为重要，不同手机拥有不同的像素密度（苹果 3，旧安卓机型 1.5），最好的解决方式是，你使用 @2x 或 @3x 的后缀来提供不同的像素尺寸。

应用部署

一个主要的区别是，当你的应用发布一个新的版本时，不会自动的送给用户。Google 和 Apple 都没有强制用户升级的机制。所以你需要保证 API 等向后兼容。

如果你要发布你的应用，你需要一个付费的谷歌账户（一次付费 $25）Apple 开发者账户（每年 $99）然后设置你的商店页面，以及应用程序的截图。需要注意你的应用将和你的账户永久绑定，无法通过不同的账户发布相同的 App，除非你将证书迁移。

本地开发构建不同与应用商店的应用，他们使用不同的签名平局，并且是一个优化构建，不经过商店，就不能直接安装在设备上。tutorial

每次发布，你都需要上传打包的应用，以便审查。期间有很多标准和检查，手动或自动检查。一次检查可呢个需要几个小时或者几天，如果你的应用需要登录，你必须提供工作证件以便审查。

你的应用也可能因为多种原因被拒绝（IOS 比 Android 更严格）你的应用如果发布时出错也会被拒绝，你可能需要和审查人员解释他们错过了什么，或者重新发布一个版本。

一旦你的应用已经在 stores 中，你可以在遵守商店指导方针的前提下，不经审查的提交 bug 修复。

增量 DOM 适配

如果你已经有一个应用，并且想合并到 React Native 中，你可以使用 DOM components。

在你的 react native 应用中使用 use dom，之后会创建一个迷你的 web 组件，使你可以使用任何 web 相关 code。对于将 web 代码迁移到 RN 尤其有用。

使DOM Components 强大的点，有一个 refs（ useDOMImperativeHandle）。是你可以调用任何本地代码。来使你的应用更好的集成。

常见错误

列表渲染

不要使用 array.map 去渲染一个列表，在移动端，必须使用 FlatList 来渲染列表，带来显著性能提升，或者使用 FlashList 有更多优化。

import { FlatList } from "react-native";

export function Posts() {
  const posts = usePosts();
    return (
      <FlatList
        data={posts}
        renderItem={({ item }) => (
          <View>
             <Text>{item.name}</Text>
          </View>
        )}
      />
    );
}

Button

不要使用 Button，虽然 react native 导出了一个 Button，但是对于 99% 的场景都不适合，最好忽略它的存在。

使用 TouchableOpacity 或者 Pressable。

import { TouchableOpacity, Text } from "react-native";

export function MyButton() {
  const onPress = () => {
    console.log("Pressed!");
  }

  return (
    <TouchableOpacity onPress={onPress} activeOpacity={0.8}>
      <Text>Button Text</Text>
     </TouchableOpacity>
    );
}

逻辑或 &&

不要使用逻辑或（&&），任何渲染的字符串必须使用 <Text> 包裹，如果意外的渲染了 NaN 或者 0，react native 会报错。

建议使用三元表达式代替。

参考文章

文章名	连接地址
from-web-to-native-with-react	https://expo.dev/blog/from-web-to-native-with-react

React Native​

对比 react​

Expo​

代码对比​

原生概念​

构建证书​

Deep linking​

手势和触摸​

触觉​

屏幕键盘​

动画​

像素密度​

应用部署​

增量 DOM 适配​

常见错误​

列表渲染​

Button​

逻辑或 &&​

参考文章​