14 Star 108 Fork 305

react-native-oh-library/usage-docs

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
.gitee
.idea
en
img
zh-cn
js
NativeBase.md
Parse-SDK-JS.md
README.md
Shopify-restyle.md
ant-design-react-native.md
bam-tech-react-native-image-resizer.md
baronha-ting.md
callstack-react-theme-provider.md
capi-architecture.md
codegen.md
contribute.md
flipper-plugin-react-navigation.md
freakycoder-react-native-bounceable.md
galio-framework.md
gorhom-bottom-sheet.md
jpush-react-native.md
klarna-platform-colors.md
link-source-code.md
lottie-react-native.md
mixpanel-react-native.md
model-gitee.md
model.md
nativewind.md
op-engineering-op-sqlite.md
openspacelabs-react-native-zoomable-view.md
patch.md
react-content-loader.md
react-countdown-circle-timer.md
react-native-MJRefresh.md
react-native-QRCode.md
react-native-SmartRefreshLayout.md
react-native-action-button.md
react-native-action-sheet.md
react-native-alipay.md
react-native-amap-geolocation.md
react-native-amap3d.md
react-native-animatable.md
react-native-animate-number.md
react-native-apple-authentication.md
react-native-aria.md
react-native-async-storage-async-storage.md
react-native-audio-recorder-player.md
react-native-audio-toolkit.md
react-native-audio.md
react-native-autoLink.md
react-native-autocomplete-dropdown.md
react-native-autocomplete-input.md
react-native-autoheight-webview.md
react-native-awesome-gallery.md
react-native-background-fetch.md
react-native-background-timer.md
react-native-baidu-map.md
react-native-barcode-builder.md
react-native-bars.md
react-native-base64.md
react-native-better-banner.md
react-native-bindingx.md
react-native-ble-manager.md
react-native-ble-plx.md
react-native-blob-util.md
react-native-blob-util(nocodegen).md
react-native-blurhash.md
react-native-bootsplash.md
react-native-bouncy-checkbox.md
react-native-button.md
react-native-calendar-events.md
react-native-calendars.md
react-native-callkeep.md
react-native-camera-kit.md
react-native-cameraroll(nocodegen) .md
react-native-cameraroll.md
react-native-canvas.md
react-native-cardview.md
react-native-chart-kit.md
react-native-charts-wrapper.md
react-native-check-box.md
react-native-clipboard-clipboard.md
react-native-clippath-capi.md
react-native-clippathview.md
react-native-code-push.md
react-native-collapsible.md
react-native-color-matrix-image-filters.md
react-native-communications.md
react-native-community-blur.md
react-native-community-checkbox.md
react-native-community-datetimepicker.md
react-native-community-geolocation.md
react-native-community-hooks.md
react-native-community-netinfo.md
react-native-community-progress-bar-android.md
react-native-community-progress-view-capi.md
react-native-community-progress-view.md
react-native-community-push-notification-ios.md
react-native-community-segmented-control.md
react-native-community-slider.md
react-native-community-toolbar-android.md
react-native-compass-heading.md
react-native-confetti-cannon.md
react-native-config.md
react-native-confirmation-code-field.md
react-native-contacts.md
react-native-context-menu-view.md
react-native-cookies-cookies.md
react-native-copilot.md
react-native-country-picker-modal.md
react-native-create-thumbnail.md
react-native-credit-card-input.md
react-native-crypto-js.md
react-native-crypto.md
react-native-custom-keyboard.md
react-native-date-picker(nocodegen).md
react-native-date-picker.md
react-native-deck-swiper.md
react-native-default-preference.md
react-native-device-info.md
react-native-dismiss-keyboard.md
react-native-doc-viewer.md
react-native-document-picker.md
react-native-dotenv.md
react-native-drag-sort.md
react-native-drawer-layout-polyfill.md
react-native-drax.md
react-native-drop-shadow.md
react-native-dropdown-picker.md
react-native-dropdownalert.md
react-native-dynamic.md
react-native-easy-grid.md
react-native-easy-toast.md
react-native-echarts-pro.md
react-native-element-dropdown.md
react-native-elements.md
react-native-email-link.md
react-native-error-boundary.md
react-native-exception-handler.md
react-native-exit-app.md
react-native-ezswiper.md
react-native-fast-image.md
react-native-feather.md
react-native-ffmpeg-kit.md
react-native-file-access.md
react-native-file-selector.md
react-native-file-viewer.md
react-native-fileupload.md
react-native-fingerprint-scanner.md
react-native-fit-Image.md
react-native-flash-message.md
react-native-flexi-radio-button.md
react-native-flip-card.md
react-native-fs(nocodegen).md
react-native-fs.md
react-native-gesture-handler.md
react-native-get-random-values.md
react-native-gifted-charts.md
react-native-gifted-chat.md
react-native-graph.md
react-native-haptic-feedback.md
react-native-harmony-sample-package.md
react-native-hole-view.md
react-native-htmlview.md
react-native-http-bridge.md
react-native-hyperlink.md
react-native-iconfont-cli.md
react-native-idfa-aaid.md
react-native-idle-timer.md
react-native-image-capinsets-next.md
react-native-image-colors.md
react-native-image-crop-picker(nocodegen).md
react-native-image-crop-picker.md
react-native-image-editor.md
react-native-image-gallery.md
react-native-image-header-scroll-view.md
react-native-image-marker.md
react-native-image-pan-zoom.md
react-native-image-picker.md
react-native-image-rotate.md
react-native-image-sequence-2.md
react-native-image-viewing.md
react-native-image-zoom-viewer.md
react-native-inappbrowser.md
react-native-incall-manager.md
react-native-indicators.md
react-native-input-scroll-view.md
react-native-intersection-observer.md
react-native-iphone-screen-helper.md
react-native-json-tree.md
react-native-keep-awake.md
react-native-keyboard-accessory.md
react-native-keyboard-aware-scroll-view.md
react-native-keyboard-controller.md
react-native-keys.md
react-native-largelist.md
react-native-lightbox.md
react-native-linear-gradient-text.md
react-native-linear-gradient.md
react-native-loading-spinner-overlay.md
react-native-localization-settings.md
react-native-localization.md
react-native-localize.md
react-native-mail.md
react-native-map-clustering.md
react-native-map-linking.md
react-native-maps-directions.md
react-native-maps.md
react-native-markdown-display.md
react-native-markdown-renderer.md
react-native-marquee-ab.md
react-native-marquee.md
react-native-mask-text.md
react-native-masked-text.md
react-native-masked-view-masked-view.md
react-native-material-buttons.md
react-native-material-design-styles.md
react-native-material-dropdown.md
react-native-material-menu.md
react-native-material-ripple.md
react-native-material-textfield.md
react-native-material-ui.md
react-native-md5.md
react-native-mlkit-ocr.md
react-native-mmkv-storage.md
react-native-modal-popover.md
react-native-modal.md
react-native-modalbox.md
react-native-modals.md
react-native-mqtt.md
react-native-multi-slider.md
react-native-multiple-select.md
react-native-neomorph-shadows.md
react-native-nested-scroll-view.md
react-native-nested-scroll.md
react-native-network-info.md
react-native-nfc-manager.md
react-native-notifier.md
react-native-offline.md
react-native-oh-tpl-react-native-screens.md
react-native-ohos-community-auto-fill.md
react-native-orientation-locker.md
react-native-orientation.md
react-native-pager-view.md
react-native-paper.md
react-native-parsed-text.md
react-native-pdf.md
react-native-performance.md
react-native-permissions.md
react-native-phone-number-input.md
react-native-picker-picker(nocodegen).md
react-native-picker-picker.md
react-native-picker-select.md
react-native-picker.md
react-native-pickers.md
react-native-popover-view.md
react-native-popup-menu.md
react-native-print.md
react-native-progress.md
react-native-pull.md
react-native-qr-decode-image-camera.md
react-native-qrcode-svg.md
react-native-quick-base64.md
react-native-randombytes.md
react-native-ratings.md
react-native-reanimated-bottom-sheet.md
react-native-reanimated-carousel.md
react-native-reanimated-table.md
react-native-reanimated.md
react-native-recaptcha-that-works.md
react-native-reconnecting-websocket.md
react-native-redash.md
react-native-render-html.md
react-native-responsive-fontsize.md
react-native-restart.md
react-native-root-modal.md
react-native-root-siblings.md
react-native-root-toast.md
react-native-safe-area-context.md
react-native-safe-module.md
react-native-safe-modules.md
react-native-screens.md
react-native-screenshot-prevent.md
react-native-scroll-bottom-sheet.md
react-native-scrollable-tab-view.md
react-native-scrollable-tabview.md
react-native-search-bar.md
react-native-secharts.md
react-native-section-list-get-item-layout.md
react-native-securerandom.md
react-native-send-intent.md
react-native-sensitive-info.md
react-native-sensors.md
react-native-shadow-2.md
react-native-shake.md
react-native-share.md
react-native-shared-element.md
react-native-shimmer-placeholder.md
react-native-signature-canvas.md
react-native-signature-capture.md
react-native-simple-toast.md
react-native-size-matters.md
react-native-skia.md
react-native-slider.md
react-native-snackbar.md
react-native-snap-carousel.md
react-native-sortable-list.md
react-native-sound.md
react-native-spinkit.md
react-native-splash-screen.md
react-native-spring-scrollview.md
react-native-sqlite-storage.md
react-native-ssl-pinning.md
react-native-step-indicator.md
react-native-sticky-parallax-header.md
react-native-stickyheader.md
react-native-storage.md
react-native-svg-capi.md
react-native-svg-charts.md
react-native-svg.md
react-native-swipe-gestures.md
react-native-swipe-list-view.md
react-native-swipeable-list.md
react-native-swiper.md
react-native-switch-pro.md
react-native-switch-selector.md
react-native-switch.md
react-native-syan-image-picker.md
react-native-system-setting.md
react-native-tab-navigator.md
react-native-tab-view.md
react-native-tcp-socket.md
react-native-testing-library.md
react-native-text-gradient.md
react-native-text-input-mask.md
react-native-text-size.md
react-native-textinput-maxlength-fixed.md
react-native-theme-control.md
react-native-theme-switch-animation.md
react-native-thumbnail.md
react-native-touch-id.md
react-native-track-player.md
react-native-transitiongroup.md
react-native-translucent-modal.md
react-native-tts.md
react-native-typing-animation.md
react-native-typography.md
react-native-udp.md
react-native-ui-lib.md
react-native-unistyles.md
react-native-url-polyfill.md
react-native-user-agent.md
react-native-vconsole.md
react-native-vector-drawable.md
react-native-vector-icons.md
react-native-version-number.md
react-native-video-cache.md
react-native-video-controls.md
react-native-video.md
react-native-view-overflow.md
react-native-view-pdf.md
react-native-view-shot.md
react-native-vision-camera.md
react-native-voice-voice.md
react-native-walkthrough-tooltip.md
react-native-waterfall-flow.md
react-native-waterflow-list.md
react-native-webview(nocodegen).md
react-native-webview.md
react-native-wechat-lib.md
react-native-worklets-core.md
react-native-zip-archive.md
react-navigation-bottom-sheet.md
react-navigation-bottom-tabs.md
react-navigation-core.md
react-navigation-devtools.md
react-navigation-drawer.md
react-navigation-elements.md
react-navigation-header-buttons.md
react-navigation-material-bottom-tabs.md
react-navigation-material-top-tabs.md
react-navigation-native-stack.md
react-navigation-native.md
react-navigation-routers.md
react-navigation-shared-element.md
react-navigation-stack.md
react-navigation.md
react-subscribe.md
realm-js.md
reanimated-props-backup.md
reassure.md
recyclerlistview.md
remobile-react-native-toast.md
rn-bugly.md
rn-emoji-keyboard.md
rn-placeholder.md
rn-sliding-up-panel.md
rn-tourguide.md
sentry-react-native.md
shopify-flash-list.md
tgz-usage.md
usage-docs-checklist.md
victory-native-xl.md
.nojekyll
LICENSE
Menu.xlsx
README.md
_404.md
_coverpage.md
_navbar.md
_sidebar.md
index.html
克隆/下载
react-native-http-bridge.md 8.82 KB
一键复制 编辑 原始数据 按行查看 历史

模板版本:v0.2.2

react-native-http-bridge

Supported platforms License

[!TIP] Github 地址

安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息:@react-native-oh-tpl/react-native-http-bridge Releases 。对于未发布到npm的旧版本,请参考安装指南安装tgz包。

进入到工程目录并输入以下命令:

npm

npm install @react-native-oh-tpl/react-native-http-bridge

yarn

yarn add @react-native-oh-tpl/react-native-http-bridge

下面的代码展示了这个库的基本使用场景:

[!WARNING] 使用时 import 的库名不变。

import React, { useState ,useEffect } from "react";
import { ScrollView, Text, Button, View, StyleSheet } from 'react-native';

var httpBridge = require('react-native-http-bridge');

const HttpBridgeDemo = () => {
  const [getRequestResult, setGetRequestResult] = useState('');
  const [postRequestResult, setPostRequestResult] = useState('');
  const GetMothedExample = () => {
    fetch('http://127.0.0.1:8888/student/getStuInfo?value=GET', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      }
    })
  }

  const PostMothedExample = () => {
    fetch('http://127.0.0.1:8888/student/postStuInfo', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        firstParam: 'yourValue',
        secondParam: 'yourOtherValue',
      })
    })
  }
  useEffect(() => {
    httpBridge.start(8888, 'http_service', (request: any) => {
      switch (request.type) {
        case 'GET':
          setGetRequestResult('requestId: ' + request.requestId + '\ntype: ' +
            request.type + '\nurl: ' + request.url + '\npostData: ' + request.postData);
          break;
        case 'POST':
          setPostRequestResult('requestId: ' + request.requestId + '\ntype: ' +
            request.type + '\nurl: ' + request.url + '\npostData: ' + request.postData);
          break;
      }
      if (request.type === "GET" && request.url.split("/")[1] === "user") {
        httpBridge.respond(request.requestId, 200, "application/json", "{\"message\": \"OK\"}");
      } else {
        httpBridge.respond(request.requestId, 400, "application/json", "{\"message\": \"Bad Request\"}");
      }
    });
    return () => {
      httpBridge.stop();
    }
  }, []);

  return (
  	<ScrollView>
      <View>
      <Text style={styles.text}>httpBridgeExample Port : 8888</Text>
        <View>
          <Text style={styles.text}>Method:GET</Text>
          <Button
            title="GET"
            color="#9a73ef"
            onPress={GetMothedExample}
          />
          <Text style={styles.result} allowFontScaling>{getRequestResult}</Text>
        </View>

        <View>
          <Text style={styles.text}>Method:POST</Text>
          <Button
            title="POST"
            color="#9a73ef"
            onPress={PostMothedExample}
          />
          <Text style={styles.result} allowFontScaling>{postRequestResult}</Text>
        </View>
      </View>
    </ScrollView>
 )
};

const styles = StyleSheet.create({
  text: {
    fontSize: 18,
    marginBottom: 10,
    color: 'red',
  },
  result: {
    marginTop: 10,
    fontSize: 18,
    marginBottom: 10,
    color: 'white',
  }
});
export default HttpBridgeDemo;

使用 Codegen

本库已经适配了 Codegen ,在使用前需要主动执行生成三方库桥接代码,详细请参考 Codegen 使用文档

Link

本库 HarmonyOS 侧实现依赖@ohos/polka 的原生端代码,已在 HarmonyOS 工程中引入过该库,无需再次引入,可跳过本章节步骤,直接使用。

目前 HarmonyOS 暂不支持 AutoLink,所以 Link 步骤需要手动配置。

首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony

1.在工程根目录的 oh-package.json 添加 overrides 字段

{
  ...
  "overrides": {
    "@rnoh/react-native-openharmony" : "./react_native_openharmony"
  }
}

2.引入原生端代码

目前有两种方法:

  1. 通过 har 包引入(在 IDE 完善相关功能后该方法会被遗弃,目前首选此方法);
  2. 直接链接源码。

方法一:通过 har 包引入(推荐)

[!TIP] har 包位于三方库安装路径的 harmony 文件夹下。

打开 entry/oh-package.json5,添加以下依赖

"dependencies": {
    "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
    "@react-native-oh-tpl/react-native-http-bridge": "file:../../node_modules/@react-native-oh-tpl/react-native-http-bridge/harmony/http_bridge.har"
  }

点击右上角的 sync 按钮

或者在终端执行:

cd entry
ohpm install

方法二:直接链接源码

[!TIP] 如需使用直接链接源码,请参考直接链接源码说明

3.在 ArkTs 侧引入 RNHttpBridgePackage

打开 entry/src/main/ets/RNPackagesFactory.ts,添加:

  ...
+ import { RNHttpBridgePackage } from "@react-native-oh-tpl/react-native-http-bridge/ts";


export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [
    new SamplePackage(ctx),
+    new RNHttpBridgePackage(ctx)
  ];
}

4.运行

点击右上角的 sync 按钮

或者在终端执行:

cd entry
ohpm install

然后编译、运行即可。

约束与限制

兼容性

要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。

请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:@react-native-oh-tpl/react-native-http-bridge Releases

权限要求

在 entry 目录下的module.json5中添加权限

打开 entry/src/main/module.json5,添加:

...
"requestPermissions": [
+  {
+    "name": "ohos.permission.KEEP_BACKGROUND_RUNNING",
+    "reason": "$string:app_name",
+    "usedScene": {
+      "abilities": [
+        "FormAbility"
+      ],
+      "when": "always"
+    }
+  },
]

API

[!TIP] "Platform"列表示该属性在原三方库上支持的平台。

[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。

Name Description Type Required Platform HarmonyOS Support
start Start the HTTP server callback no Android/iOS yes
respond Server Response Result void no Android/iOS yes
stop Stop the HTTP server void no Android/iOS yes

start

start(port:number, serviceName:string, callback): void;
Name Description Type Required Platform HarmonyOS Support
port HTTP Server port number number Yes iOS/Android Yes
serviceName HTTP Server Name string Yes iOS/Android Yes

respond

respond(requestId:string, code:number, type:string, body:string): void;
Name Description Type Required Platform HarmonyOS Support
requestId HTTP Server request ID string Yes iOS/Android Yes
code Code of the response from the server number Yes iOS/Android Yes
type Content-Type in the response from the server string Yes iOS/Android Yes
body Body of the response from the server string Yes iOS/Android Yes

遗留问题

其他

开源协议

本项目基于The MIT License(MIT) ,请自由地享受和参与开源。

Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/react-native-oh-library/usage-docs.git
git@gitee.com:react-native-oh-library/usage-docs.git
react-native-oh-library
usage-docs
usage-docs
master

搜索帮助