@aibee/rn-nav-sdk

@aibee/rn-nav-sdk 是一个面向第三方接入的 React Native 导航 SDK。

它通过 NavWebview 组件为 WebView 中的 H5 页面注入导航相关的原生能力，支持在 iOS 和 Android 上承载导航页面加载与设备能力接入。

安装

SDK 依赖 react-native-webview，请一并安装：

pnpm add @aibee/rn-nav-sdk react-native-webview

如果使用 iOS，还需要执行：

cd ios && pod install

使用方式

React Native 端

在 React Native 页面中直接引用 NavWebview 组件，并通过 source 传入需要加载的 H5 地址即可。

如果页面需要适配安全区域，建议像下面这样放在 SafeAreaProvider 中使用。

import { StatusBar, StyleSheet, View } from 'react-native';
import {
  SafeAreaProvider,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';
import { NavWebview } from '@aibee/rn-nav-sdk';

function AppContent() {
  const insets = useSafeAreaInsets();

  return (
    <View style={styles.container}>
      <StatusBar barStyle="dark-content" />
      <View style={{ flex: 1, paddingTop: insets.top }}>
        <NavWebview
          source={{ uri: 'http://your-navigation-page-url' }}
        />
      </View>
    </View>
  );
}

export default function App() {
  return (
    <SafeAreaProvider>
      <AppContent />
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

NavWebview Props

NavWebview 继承了 react-native-webview 的 WebViewProps，因此绝大多数 WebView 原生属性都可以直接透传使用，例如：

• source
• style
• onLoad
• onLoadEnd
• onError
• javaScriptEnabled
• domStorageEnabled
• cacheEnabled
• incognito
• originWhitelist

除了 WebView 自带属性外，NavWebview 还额外支持以下 SDK 相关 props：

| 属性 | 类型 | 说明 | |------|------|------| | onBluetoothStateChange | (state) => void | 系统蓝牙状态变化回调 | | onAppBluetoothStateChange | (state) => void | App 蓝牙状态变化回调 | | onIBeaconDiscovered | (beacons) => void | iBeacon 发现回调 | | onPermissionChange | (event) => void | 权限状态变化回调 | | applicationNameForUserAgent | string | 追加到 SDK 默认 User-Agent 标识后的应用名 |

以下几个 WebView 相关属性在 NavWebview 中也支持，但会由 SDK 做统一处理：

• onMessage：SDK 会先处理 JSBridge 消息，再继续回调业务侧传入的 onMessage
• injectedJavaScriptBeforeContentLoaded：SDK 会先注入内置桥接脚本，再拼接业务侧传入的脚本
• userAgent：如果传入自定义 userAgent，SDK 会在其后追加 AibeeRnNav
• applicationNameForUserAgent：在未传入 userAgent 时，SDK 会将其拼接为 AibeeRnNav <your-app-name>

说明

• NavWebview 是 SDK 对外提供的核心组件
• source 的使用方式与 react-native-webview 保持一致
• H5 页面加载后即可通过 SDK 注入的能力与原生侧交互