指南 · 02

Web 與 React Native

兩個平台用同一個 import。Metro 會選原生實作，Web 打包工具會選 DOM 實作。

同一個 import

安裝一個套件，在兩個平台上都從它的根路徑匯入。唯一必要的 peer 相依是 React；React Native 是原生應用程式的選用 peer 相依。兩個平台都不需要 Provider、包裝元件或初始化呼叫。

App.jsx

// Web and React Native: the same import.
import { MotionNumber, MotionList } from '@kkwaenggwari/animated-chorus';

export function Score({ points, players }) {
  return (
    <>
      <MotionNumber value={points} />
      <MotionList items={players} renderItem={(player) => player.name} />
    </>
  );
}

動態如何播放

在 Web 上，元件以 Web Animations API 播放經解析取樣的彈簧，因此不必載入動畫函式庫，也不會每一格觸發 React 渲染。在 React Native 上，元件使用 Animated：transform 與 opacity 走原生驅動，只有版面（寬度或高度）改變時才用 JS 驅動。

部分	Web	React Native
transform 與 opacity	Web Animations API	`Animated`，原生驅動
寬度與高度	Web Animations API	`Animated`，JS 驅動
串流文字	字元淡入，React 每秒只渲染幾次	真正的 `Text`，不淡入
底部面板與縮放	頂層的原生 `dialog`	透明的 `Modal`
背景	在隱藏的分頁中，串流文字會一次顯示	動態直接落到結束狀態

React Native 的特別之處

API 相同；以下是你在裝置上會注意到的差異。

數字與串流文字始終是真正的 Text，所以選取、換行、numberOfLines 與無障礙功能都照常運作。
MotionSheet 與 MotionZoom 會渲染在透明的 Modal 中，返回鍵可將它們關閉。
面板內部的 ScrollView 保留自己的手勢；面板要從把手與靜態區域拖曳。
MotionHold 會透過無障礙的啟用動作直接確認。
行內的 MotionSwap 以單行測量新內容；會換行的內容請使用 inline=—。

Screen.native.jsx

import { Text, View } from 'react-native';
import { MotionNumber, MotionSheet } from '@kkwaenggwari/animated-chorus';

export function Wallet({ balance, open, setOpen }) {
  return (
    <View>
      <MotionNumber
        value={balance}
        intl
        locale="en-US"
        format={{ style: 'currency', currency: 'USD' }}
      />
      <MotionSheet open={open} onOpenChange={setOpen} detents={[0.5, 0.9]}>
        <Text>Recent activity</Text>
      </MotionSheet>
    </View>
  );
}

版面始終歸你所有

元件保持平台自身的版面：字型度量、換行、字型縮放、父元素限制以及你的樣式。動態絕不會為你的文字強加固定字寬、固定文字高度或裁切遮罩。

在哪裡驗證了什麼

Web 上的行為在真實瀏覽器中驗證。React Native 上的行為由共用模型的測試與模擬渲染器涵蓋，所以發布前請在目標裝置上檢查手勢與版面。