React-Native WebView内微信分享

最新推荐文章于 2024-01-16 15:01:18 发布

置顶

EsaySK

最新推荐文章于 2024-01-16 15:01:18 发布

阅读量422

点赞数

分类专栏： RN 文章标签： react-native rn webview 分享

本文链接：https://blog.csdn.net/qq_31779597/article/details/85000542

版权

本文介绍如何在React-Native应用中使用WebView实现微信分享功能，包括分享悬浮按钮和处理webView内页面回退。首先介绍了所需组件，如react-native-wechat，用于微信分享等，以及react-native-action-button和react-native-vector-icons用于美化悬浮按钮。接着，提供了相关代码实现，最终展示了功能完成后的效果。

摘要由CSDN通过智能技术生成

做为一个后台程序猿听说RN能同时打包android和ios，于是踩坑之旅开始了，废话不多说直接上代码。

实现功能：

实现微信分享webView所有界面。
分享悬浮按钮。
webView内界面回退处理。

准备事项:（应为要用到微信分享和悬浮按钮，所以要引入其他的组件）

RN官方推荐使用 yarn 安装方式可以参照官方网站 https://reactnative.cn/docs/getting-started/

组件详细说明，请自行查找

1引入react-native-wechat微信功能组件，包含微信分享，微信授权，微信支付等。引入方式如下

//方式一：使用yarn导入，在项目根目录执行
yarn add react-native-wechat
//使用react-native link 自动导入android和ios
react-native link

//方式二：使用npm导入，在项目根目录执行
npm install react-native-wechat --save
//使用react-native link 自动导入android和ios
react-native link

2 引入react-native-action-button 和react-native-vector-icons组件，可以制作精美的Button样式

//同上两种方式执行--yarn
yarn add react-native-action-button

yarn add react-native-vector-icons

react-native link

//npm
npm install react-native-action-button --save

npm install react-native-vector-icons --save

react-native link

好了需要准备的已经完成，那就直接贴上代码：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {
    Platform,