This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).

For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

expo-brownfield 是一个工具包，用于向现有的原生 Android 和 iOS 应用中添加 React Native 视图。它提供：

• 内置 API，用于原生应用和 React Native 应用之间的双向通信与导航
• 配置插件，用于在你的 Expo 项目中自动设置 brownfield 目标
• CLI，用于将构建产物发布到 Maven 仓库（Android）和 XCFrameworks（iOS）

安装

If you are installing this in an existing React Native app, make sure to install expo in your project.

使用

通信 API

通信 API 使原生（宿主）应用与 React Native 之间能够进行基于消息的双向通信。

从 React Native 向原生发送消息

import * as Brownfield from 'expo-brownfield';

Brownfield.sendMessage({
  type: 'MyMessage',
  data: {
    language: 'TypeScript',
    expo: true,
    platforms: ['android', 'ios'],
  },
});

在 React Native 中接收来自原生的消息

import * as Brownfield, { type MessageEvent } from 'expo-brownfield';
import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const handleMessage = (event: MessageEvent) => {
      console.log('收到消息：', event);
    };

    Brownfield.addMessageListener(handleMessage);

    return () => {
      Brownfield.removeMessageListener(handleMessage);
    };
  }, []);

  // ...
}

从原生向 React Native 发送消息

import expo.modules.brownfield.BrownfieldMessaging

BrownfieldMessaging.sendMessage(mapOf(
    "type" to "MyAndroidMessage",
    "timestamp" to System.currentTimeMillis(),
    "data" to mapOf(
        "platform" to "android"
    )
))

import ExpoBrownfield

BrownfieldMessaging.sendMessage([
    "type": "MyIOSMessage",
    "timestamp": Date().timeIntervalSince1970,
    "data": [
        "platform": "ios"
    ]
])

在原生中接收来自 React Native 的消息

import expo.modules.brownfield.BrownfieldMessaging

val listenerId = BrownfieldMessaging.addListener { event ->
    println("来自 React Native 的消息：$event")
}

// 稍后，移除监听器：
BrownfieldMessaging.removeListener(listenerId)

import ExpoBrownfield

let listenerId = BrownfieldMessaging.addListener { message in
    print("来自 React Native 的消息：\(message)")
}

// 稍后，移除监听器：
BrownfieldMessaging.removeListener(id: listenerId)

在应用配置中进行配置

expo-brownfield 包提供了一个配置插件，可在使用连续原生生成（CNG）时用于配置 brownfield 集成。此插件允许你自定义 Expo 项目如何被打包并集成到现有的原生应用中。

Example app.json with config plugin

{
  "expo": {
    "plugins": [
      [
        "expo-brownfield",
        {
          "ios": {
            "targetName": "MyBrownfieldTarget",
            "bundleIdentifier": "com.example.brownfield"
          },
          "android": {
            "group": "com.example",
            "libraryName": "brownfield",
            "package": "com.example.brownfield",
            "version": "1.0.0"
          }
        }
      ]
    ]
  }
}

Configurable properties

CLI

expo-brownfield 库包含一个 CLI，用于构建并发布到 Maven 仓库（Android）和 XCFrameworks（iOS）。

命令

build:android

构建并将 brownfield 库及其依赖项发布到 Maven 仓库。

build:ios

构建 brownfield XCFramework，并将 Hermes XCFramework 复制到产物目录。

tasks:android

列出所有可用的发布任务和 Maven 仓库。

API

import * as Brownfield from 'expo-brownfield';

Hooks

Methods

Event Subscriptions

const subscription = addMessageListener((event) => {
  console.log('Received message from native:', event);
});

// Later, to remove the listener:
subscription.remove();

Interfaces

Types