This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

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")
}

// Later, to remove the listener:
BrownfieldMessaging.removeListener(listenerId)

import ExpoBrownfield

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

// Later, to remove the listener:
BrownfieldMessaging.removeListener(id: listenerId)

app 配置中的配置

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 库包含一个用于构建并发布到 Maven 仓库（Android）和 XCFrameworks（iOS）的 CLI。

命令

build:android

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

build:ios

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

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