目前,較為流行的 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 文件。
編寫一個簡易模塊#
在初始模板中已經存在了一個官方實例模塊。我們也可以嘗試自己寫一個簡單的組件。下面以 iOS 平台並使用 Swift UI 編寫。
根據圖示找到我們的模塊位置。
新建一個內部模塊,用以下的方式組織文件:
../ListView
├── ListView.swift
└── ListViewModule.swift
在 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 已經正常渲染。
此文由 Mix Space 同步更新至 xLog 原始鏈接為 https://innei.in/posts/tech/use-native-components-in-expo