banner
innei

innei

写代码是因为爱,写到世界充满爱!
github
telegram
twitter

在 Expo 中使用原生組件

目前,較為流行的 React Native 框架是 Expo,Expo 提供了 Expo Modules API 可供我們快速的開發一個 Native 組件或者模塊。

這篇文章將簡單介紹如何在 Expo ~52 中在當前項目中初始化並編寫一個簡單的 Native 組件。

準備#

開始之前,確保你已經建立了一個 Expo 的項目。

然後,通過以下命令創建一個 Expo Module。

npx create-expo-module@latest --local

根據引導創建了一個 Module。位於 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 目錄是編寫 native 代碼的入口。

集成到現有項目中#

現在我們需要把這種模塊應用到當前的 app 中。

編輯 package.json 增加這個字段:

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

然後,執行 npm run expo prebuild --clean 刷新 ios 和 android 的項目。

等待安裝完 native 依賴之後,我們使用 Xcode 打開 xcworkspace 文件。

image

編寫一個簡易模塊#

在初始模板中已經存在了一個官方實例模塊。我們也可以嘗試自己寫一個簡單的組件。下面以 iOS 平台並使用 Swift UI 編寫。

根據圖示找到我們的模塊位置。

image

新建一個內部模塊,用以下的方式組織文件:

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

image

ListView.swift 中編寫以下代碼,一個簡單 SwiftUI List:

import SwiftUI

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

#Preview {
    ListView()
}

然後定義 Expo Module,編輯 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
    }
}

到這裡,native 端已經完成了。接下來修改 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 中使用 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 已經正常渲染。

image

此文由 Mix Space 同步更新至 xLog 原始鏈接為 https://innei.in/posts/tech/use-native-components-in-expo

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。