Expo Brownfield

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

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

• 内置 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)

app config 中的配置

expo-brownfield 包提供了一个 config plugin，可在使用 Continuous Native Generation (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