React native项目和React项目交互，用injectJavaScript把js代码注入到项目中

最新推荐文章于 2024-02-19 15:43:05 发布
最新推荐文章于 2024-02-19 15:43:05 发布
阅读量177 收藏
点赞数
文章标签： react native react.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46665317/article/details/134209279
版权

前言

不知道你们有没有遇到过一些很刁钻的需求，就是用antd pro 开发的react web项目需要打包成exe文件和apk文件，我找了很多可以将一个网址打包成exe的工具，最后选择了专业的工具electron，打包出来的exe文件对我的项目很友好，兼容的很好，但是打包成apk就有点头大了，首先是用的HBuildx把应用入口页面(首页)地址设置成了我们项目的网站，但是项目中有一个语言播报的插件，window.speechSynthesis在安卓浏览器是运行不了的，最后的最后就是选择了用react native tts来播报（在安卓环境下），用react native来做apk的打包，用到的是Web View，话不多说，上代码:

1.这个是RN的代码（用injectJavaScript是因为RN里面没有window对象，而injectJavaScript可以写js,会把代码注入到项目中运行）

在这里插入图片描述
2.在react项目中监听playCompleted事件，播报完成后告诉react,和react中的语音播共用一个逻辑。
在这里插入图片描述
3.执行完毕，撒花
在这里插入图片描述

廿柒拾捌
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React 个人笔记
qq_44973025的博客
08-21 301
环境 node.js v10+ windows 64bit 学习 Webpack: node.js环境的打包工具 学习目标 1.构建打包环境 2.构建开发环境 3.四个核心概念： 入口：指定webpack打包或本地服务运行时的程序入口文件 出口：打包之后，打包的结果放在 某个文件夹 dist loaders：用于对代码中各种文件进行编译转换，目标是转换成浏览器能够识别的代码 plugins：用于扩展功能 webpack 起步 新建react-stack 初始化环境 ： npm init -
react context上下文与vue中 provide inject的用法区别
小白的博客
06-27 873
1、在孙组件中引入useContext，以及上文导出的FspThemeContext。使用时直接：fspData?.fspTheme即可。2、将获取到的上下文赋值给fspData。3、传递数据（value项不能缺少！1、引入createContext。①不解构直接使用Provider。
React Native与WebView的交互
热门推荐
wh义华的专栏
11-16 1万+
1、WebView中注入JavaScript在webview中通过injectJavaScript注入javascript的方法时，使用方法如下injectJavaScript={this.init()} init()方法定义如下 init = () => { // todo something }通过injectedJavaScript注入javascript字符串时，只能注入静态的文本代
注入js文件_React - 让组件注入 style
weixin_29907111的博客
01-08 403
StyleInjectReact 组件样式依赖的内聚解决方案将 css 样式规则随着组件导入注入到 document 中，纯 ts/js 实现。痛点 Introduction在实际业务中，我们创造了大量的 Presentational Components 来为我们渲染 UI。很多时候，我们希望这样的组件能够表现出某种样式风格。基于其复用的需求，我们会想到对元素设置 className，然后在样式...
react-intl中injectIntl/intlProvider方法的源码简析
高山上的鱼
12-27 9831
问题：react-intl用法部分 function Home(props) { return ( ); } export default injectIntl(Home);//传入一个包裹组件WrappedCom
react-native-clean-project：自动清理React Native项目
02-05
通过清除缓存和模块，然后再次重新安装，来清理您的React Native项目。 正在安装 yarn add -D react-native-clean-project 跑步 React-Native CLI插件 标准react-native命令会自动将该模块检测为插件，并添加新的...
ios原生和react-native各种交互的示例代码
08-29
本篇文章主要介绍了ios原生和react-native各种交互的示例代码，非常具有实用价值，需要的朋友可以参考下
react-native-performance：监视和衡量React Native性能
02-05
与React.Profiler API很好地集成跟踪应用程序中的任意事件，例如组件渲染时间捕获网络流量收集本机跟踪，例如脚本执行和与根视图进行交互的时间收集开发中的原生指标，例如JS包大小 在调试工具Flipper中可视化时间...
react-native-sticky-item：受Facebook Stories启发的交互式粘性项目
02-05
另外，您需要安装 ， 和 ，并按照其安装说明进行操作。 用法 ... import StickyItemFlatList from '@gorhom/sticky-item' ; // dummy data const data = [ ... Array ( 20 ) ] . fill ( 0 ) . map ( ( _ , index ...
【react】react中和vue中的provide/inject、context写法示例
最新发布
hzxOnlineOk的博客
02-19 800
在 React 中，provide和inject的功能类似于 Vue.js 中的provide和inject。它们都是用于跨组件层次传递数据的。在 React 中，没有内置的provide和inject函数。但是，你可以使用 React 的 Context 来实现类似的功能。Context 是 React 提供的一种机制，用于在组件树中共享数据。通过创建一个 Context 对象，可以将数据传递给子组件，无论组件层次有多深，子组件都可以通过或者Consumer来访问这些数据。上述示例中，
学习在React Native和React JS之间共享代码
weixin_26711867的博客
10-16 490
React Native is a popular choice for web and mobile apps, being a framework for creating native apps using JavaScript. It compiles to the native app components, which make creating native mobile apps ...
mobx-react api使用介绍
u014165391的博客
09-09 850
mobx-react api说明 @inject @inject是为了向当前组件注入store, 通过Provider组件提供的context向下传递后，进而使用this.props来获取； 其实@inject方法和react-redux提供的connect方法很相似，都是将store向下传递到后代组件上； @observer @observer 是mobx-react提供的，通过使用@observer，将react组件转换成一个监听者，这样在被监听的应用状态变量(Observable)有更新时，r
javascript 注入_如何注入JavaScript代码以自动操作网站
cumian9828的博客
08-16 3758
javascript 注入As developers and users of the internet, we often come across websites that display many pop-ups, from subscription requests to paywalls, advertisements to notifications, and so on. 作为Int...
React Native 内嵌h5页面(基于vue)的实现方案调研
llz0725的博客
03-02 5340
React Native 是目前流行的跨平台移动应用开发框架之一。通过采用不同的方法进行混合移动应用开发，它不会生成原生 UI 组件，而是基于 React，React Native 是一个用于构建基于 Web 的交互界面的 JavaScript 库，因此会有更丰富的 UI 体验效果，同时也能够很好地调用底层框架的UI使用。 React Native 已经成为一种流行的移动开发技术，它提供了一个使用 JavaScript 构建原生跨平台移动应用的强大框架。 在做原生开发时，一般我们会有一些加载H5网页的需求，
React Native的 Webview 和 H5 相互发送监听消息
halo1416的博客
06-15 5557
前言：最近项目中大量使用的Webview嵌套H5的情况，其中一些需求免不了要对Webview 和 H5 进行数据交互。 方式一：postMessage ==>> 注意：这种方式适用于React Native自身Webview组件，但在版本0.59时会提示Webview将被弃用 1.RN端向H5发送消息 1.1 RN端 首先Webview绑定 ref='web...
mobx系列(三)-在React中使用Mobx
smk108的博客
12-17 7351
Mobx提供了一个mobx-react包帮助开发者方便地在React中使用Mobx，mobx-react中有observer、Provider、inject几个常用的api。在《mobx系列(二)-mobx主要概念》中我们已经介绍过observer，本文介绍下inject、Provider，以及Mobx如何与React结合使用。 1、Provider Provider是一个React组件，使用...
求告知，react为什么使用inject后获取不到数据？ 打印this.props.statisticsDataStore.produceCount的值是undefind；
dpq1336的博客
08-20 358
react 无状态组件使用mobx中的注入依赖@inject
周家大小姐
05-24 1558
import React from 'react' import { observer, inject } from "mobx-react" //'TodoListStore', 'BirdStore'定义的store名 const Fun = inject('TodoListStore', 'BirdStore')(observer((props) => { return ( <div>{ props.TodoListStore.firstTodo }</div&g.
React 源码深度解读（六）：依赖注入
weixin_34268843的博客
11-06 388
前言 React 是一个十分庞大的库，由于要同时考虑 ReactDom 和 ReactNative ，还有服务器渲染等，导致其代码抽象化程度很高，嵌套层级非常深，阅读其源码是一个非常艰辛的过程。在学习 React 源码的过程中，给我帮助最大的就是这个系列文章，于是决定基于这个系列文章谈一下自己的理解。本文会大量用到原文中的例子，想体会原汁...
react-native 项目结构
05-25
React Native 项目结构可以根据个人喜好和项目需求进行组织，但一般情况下，以下是一个典型的结构： ``` project/ ├── __tests__/ ├── android/ ├── ios/ ├── node_modules/ ├── src/ │ ├── ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值