Expo 棕地

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

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

安装

🌐 Installation

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

用法

🌐 Usage

通信 API

🌐 Communication API

通信 API 允许本地（宿主）应用与 React Native 之间进行双向、基于消息的通信。

🌐 The Communication API enables bi-directional, message-based communication between the native (host) app and React Native.

从 React Native 发送消息到原生

🌐 Sending messages from React Native to native

import * as Brownfield from 'expo-brownfield';

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

在 React Native 中接收来自本地用户的消息

🌐 Receiving messages from native in React Native

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

function MyComponent() {
  useEffect(() => {
    const handleMessage = (event: MessageEvent) => {
      console.log('Received message:', event);
    };

    Brownfield.addMessageListener(handleMessage);

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

  // ...
}

从原生发送消息到 React Native

🌐 Sending messages from native to 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 的消息

🌐 Receiving messages from React Native in native

import expo.modules.brownfield.BrownfieldMessaging

val listenerId = BrownfieldMessaging.addListener { event ->
    println("Message from React Native: $event")
}

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

import ExpoBrownfield

let listenerId = BrownfieldMessaging.addListener { message in
    print("Message from React Native: \(message)")
}

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

应用配置中的配置

🌐 Configuration in app config

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

🌐 The expo-brownfield package provides a config plugin that can be used to configure the brownfield integration when using Continuous Native Generation (CNG). This plugin allows you to customize how your Expo project is packaged and integrated into your existing native app.

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）。

🌐 The expo-brownfield library includes a CLI for building and publishing to Maven repositories (Android) and XCFrameworks (iOS).

命令

🌐 Commands

build:android

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

🌐 Builds and publishes the brownfield library and its dependencies to Maven repositories.

build:ios

构建棕地 XCFramework 并将 Hermes XCFramework 复制到 artifacts 目录。

🌐 Builds the brownfield XCFramework and copies the Hermes XCFramework to the artifacts directory.

tasks:android

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

🌐 Lists all available publish tasks and Maven repositories.

应用接口

🌐 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