# 策展 · X (Twitter) 🔥🔥

> 作者：Błażej Kustra (@blazejkustra_) · 平台：X (Twitter) · 日期：2026-05-17

> 原始來源：https://x.com/blazejkustra_/status/2055640396848329184

## 中文摘要

React Native 透過 WebGPU 打造動態信用卡 UI。

Błażej Kustra 連續兩週示範如何運用 react-native-effects 與 WebGPU 技術，在 React Native 環境中實現高品質視覺特效。本週重點聚焦在信用卡元件，展示如何將原本靜態的 UI 轉化為帶有動態背景的互動式設計。

**核心功能**
- 提供多種預建特效元件，包括 Iridescence、LiquidChrome、Silk、Campfire、CalicoSwirl、Aurora、LinearGradient 與 CircularGradient
- 支援動態與靜態兩種漸層模式，讓開發者可依需求切換
- 所有特效皆可在背景執行緒運作，避免阻塞主執行緒

**技術架構**
- 依賴 react-native-wgpu 實現 WebGPU 渲染
- 透過 react-native-worklets 的 Bundle Mode，在獨立 JS runtime 執行 GPU 渲染迴圈
- 核心元件 ShaderView 負責處理 WGSL 片段著色器、uniform 緩衝區以及與 React Native View 的整合

**ShaderView 使用方式**
```tsx
import { ShaderView } from 'react-native-effects';

<ShaderView
  fragmentShader={myShader}
  colors={['#ff0000', '#0000ff']}
  params={[1.0, 0.5]}
  speed={1.0}
  style={{ width: '100%', height: 300 }}
/>;
```

**安裝與設定步驟**
1. 安裝主要套件  
   ```sh
   npm install react-native-effects
   ```
2. 安裝必要相依套件  
   ```sh
   npm install react-native-wgpu react-native-worklets react-native-reanimated react-native-gesture-handler
   ```
3. 在 package.json 根層級加入以下設定  
   ```json
   {
     "worklets": {
       "staticFeatureFlags": {
         "BUNDLE_MODE_ENABLED": true,
         "FETCH_PREVIEW_ENABLED": true
       }
     }
   }
   ```

**Bare React Native 設定**
- 修改 babel.config.js  
  ```js
  module.exports = {
    presets: ['module:@react-native/babel-preset'],
    plugins: [
      ['react-native-worklets/plugin', { bundleMode: true, strictGlobal: true }],
    ],
  };
  ```
- 修改 metro.config.js  
  ```js
  const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
  const { getBundleModeMetroConfig } = require('react-native-worklets/bundleMode');

  let config = getDefaultConfig(__dirname);
  config = getBundleModeMetroConfig(config);

  config.transformer = {
    ...config.transformer,
    getTransformOptions: async () => ({
      transform: {
        inlineRequires: true,
      },
    }),
  };

  module.exports = config;
  ```

**Expo 設定**
- 安裝額外開發依賴  
  ```sh
  npm install -D babel-preset-expo @react-native/metro-config
  ```
- 修改 babel.config.js  
  ```js
  module.exports = function (api) {
    api.cache(true);
    return {
      presets: ['babel-preset-expo'],
      plugins: [
        ['react-native-worklets/plugin', { bundleMode: true, strictGlobal: true }],
      ],
    };
  };
  ```
- 修改 metro.config.js  
  ```js
  const { getDefaultConfig } = require('expo/metro-config');
  const { getBundleModeMetroConfig } = require('react-native-worklets/bundleMode');

  let config = getDefaultConfig(__dirname);
  config = getBundleModeMetroConfig(config);

  config.transformer = {
    ...config.transformer,
    getTransformOptions: async () => ({
      transform: {
        inlineRequires: true,
      },
    }),
  };

  module.exports = config;
  ```

**實際應用範例**
```tsx
import { Iridescence, LiquidChrome, Aurora } from 'react-native-effects';

<Iridescence style={StyleSheet.absoluteFillObject} />

<LiquidChrome style={{ width: '100%', height: 300 }} speed={1.5} />

<Aurora
  style={StyleSheet.absoluteFillObject}
  color="#4ade80"
  speed={1.0}
  intensity={1.0}
  layers={3}
  waviness={1.0}
/>
```

**自訂特效開發**
- 開發者可直接使用 ShaderView 搭配自訂 WGSL 著色器建立全新效果
- 官方文件 CUSTOM_EFFECTS.md 提供完整 API 說明與可直接複製的 AI Prompt，加速自訂流程

**專案資源**
- 原始碼與範例應用程式已公開於 [GitHub 儲存庫](https://github.com/blazejkustra/react-native-effects)
- 授權方式為 MIT，歡迎社群貢獻與擴充

## 標籤

Web, React, 其他, React Native