Expoでネイティブコンポーネントを使用する

現在、比較人気のある React Native フレームワークは Expo で、Expo は Expo Modules API を提供しており、私たちは迅速にネイティブコンポーネントやモジュールを開発できます。

この記事では、Expo ~52 で現在のプロジェクトにネイティブコンポーネントを初期化し、簡単なものを書く方法を簡単に紹介します。

準備#

始める前に、Expo プロジェクトを作成していることを確認してください。

次に、以下のコマンドを使用して Expo モジュールを作成します。

npx create-expo-module@latest --local

ガイドに従ってモジュールを作成しました。modules/<name> にあり、以下のファイルが存在します。

.
├── android
│   ├── build.gradle
│   └── src
│       └── main
│           ├── AndroidManifest.xml
│           └── java
│               └── expo
│                   └── modules
│                       └── testmodule
│                           ├── TestModule.kt
│                           └── TestModuleView.kt
├── expo-module.config.json
├── index.ts
├── ios
│   ├── TestModule.podspec
│   ├── TestModule.swift
│   └── TestModuleView.swift
└── src
    ├── TestModule.ts
    ├── TestModule.types.ts
    ├── TestModule.web.ts
    ├── TestModuleView.tsx
    └── TestModuleView.web.tsx

10 directories, 14 files

ここで、android と ios ディレクトリはネイティブコードを書くためのエントリポイントです。

既存プロジェクトへの統合#

今、私たちはこのモジュールを現在のアプリに適用する必要があります。

package.json を編集して、このフィールドを追加します：

 "expo": {
    "autolinking": {
      "nativeModulesDir": "./modules"
    }
  },

次に、npm run expo prebuild --clean を実行して、ios と android のプロジェクトをリフレッシュします。

ネイティブ依存関係のインストールが完了したら、Xcode で xcworkspace ファイルを開きます。

簡易モジュールの作成#

初期テンプレートには公式のサンプルモジュールがすでに存在しています。私たちも簡単なコンポーネントを自分で書いてみることができます。以下は iOS プラットフォームで Swift UI を使用して書かれています。

図に従って私たちのモジュールの位置を見つけます。

内部モジュールを新しく作成し、以下のようにファイルを整理します：

../ListView
├── ListView.swift
└── ListViewModule.swift

ListView.swift に以下のコードを書きます。これは簡単な SwiftUI リストです：

import SwiftUI

struct ListView: View {
    var body: some View {
        List {
            ForEach(1...10, id: \.self) { index in
                Text("\(index)")
            }
        }
    }
}

#Preview {
    ListView()
}

次に、Expo モジュールを定義し、ListViewModule.swift を編集します。

import ExpoModulesCore
import SwiftUI

class ListViewProps: ExpoSwiftUI.ViewProps {
    
}

fileprivate struct ListViewExpoView: ExpoSwiftUI.View {
    @EnvironmentObject var props: ListViewProps
    var body: some View {
        ListView()
    }
}

public class ListViewModule: Module {
    public func definition() -> ModuleDefinition {
        Name("ListView") // 代表之后调用 requireNativeView 使用的标识符
        
        View(ListViewExpoView.self) // 使用 ListViewExpoView
    }
}

ここまでで、ネイティブ側は完了しました。次に expo-module.config.json を修正します。

新しく追加した ListViewModule を追加します。

{
  "platforms": [
    "apple",
    "android",
    "web"
  ],
  "apple": {
    "modules": [
      "TestModule",
      "ListViewModule" // 増加
    ]
  },
  "android": {
    "modules": [
      "expo.modules.testmodule.TestModule"
    ]
  }
}

私たちは android を実装していないので、ここには書きません。その後、npm expo prebuild を実行します。

React Native でネイティブコンポーネントを使用する#

上記の手順を経て、以下のように React Native で使用します。

import { requireNativeView } from 'expo'
import type { ViewProps } from 'react-native'

interface ListViewProps extends ViewProps {}
const ListView = requireNativeView<ListViewProps>('ListView') // 使用上面定义的 Name
export default function HomeScreen() {
  return <ListView style={{ flex: 1 }} />
}

次に、Xcode でプロジェクトを起動し、同時に metro dev server を起動します。

Xcode の View Hierarchy で、NativeView が正常にレンダリングされているのが確認できます。

この記事は Mix Space によって xLog に同期更新されました。元のリンクは https://innei.in/posts/tech/use-native-components-in-expo