使用说明

@tastien/rn-bridge, 处理 H5 与 Native 交互的 js 库

Docs

传送门

安装

工程安装

npm install @tastien/rn-bridge --save

或

yarn add @tastien/rn-bridge

在项目中使用

H5端

import { memo } from 'react'
import H5Bridge, { navigator } from '@tastien/rn-bridge/lib/h5';

export default memo(() => {
  // 获取 rn-bridge 版本号
  const version = () => {
    H5Bridge.commons.version({
      onSuccess: (res) => {},
      onError: (err) => {},
      onFinally: () => {}
    });
  };

  // 通知 app 返回上一级路由
  const goBack = () => {
    navigator.goBack({
      onSuccess: (res) => {},
      onError: (err) => {},
      onFinally: () => {}
    });
  }

  return (
    <>
      <button onClick={version}>version</button>
      <button onClick={goBack}>goBack</button>
    </>
  )
})

Native端

import React, { memo, useRef } from 'react'
import { WebView } from '@hercules/components/src'
import { getDomain } from '@hercules/core/src'
import { useNavigation } from '@react-navigation/native'
import { handleBridgeMessage } from '@tastien/rn-bridge/lib/native'
import type { TWebViewRef } from '@tastien/rn-bridge/lib/core/interface';

const serverUrl = getDomain()

export default memo(() => {
  const webviewRef = useRef<TWebViewRef>(null)
  const navigation = useNavigation()

  return (
    <>
      <WebView
        ref={webviewRef}
        url={`${serverUrl}/#/h5/rn-bridge`}
        onMessage={data => {
          // H5 与 Native 之间的通信 执行对应的操作并返回处理的结果
          handleBridgeMessage(data, webviewRef, navigation)
        }}
      />
    </>
  )
})