前端web页面和RN移动端进行交互

我们在进行RN开发时,有时候需要用到外部网页在RN里面进行显示,例如我有个页面,不想用RN去画,但是想让这个页面从RN显示,这时候就要考虑web页面和RN交互了,比如我点击web网页按钮会得到一些东西,然后需要RN移动端实时读取到数据,不多说了,看下面的示例代码即可

RN端页面

js 复制代码
import React, {useEffect} from 'react';
import {StyleSheet} from 'react-native';
// yarn add react-native-webview
import {WebView} from 'react-native-webview';

export default function WebviewScreen({navigation, route}) {
  return (
      <WebView
      	style={styles.container}
        source={{uri: 'http://192.168.1.85:8080/#/BreakKcal'}} // 网页地址
        onMessage={event => {
          // 处理从WebView接收到的消息
          console.log('接受到了JS的消息:', event.nativeEvent.data);
        }}
      />
  );
}

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

web端页面处理

js 复制代码
// 点击按钮给RN发送数据
// 下面这个方法适用于纯原生html和js,以及所有基于原生的框架vue,react,uniapp等等都适合,因为本质也是调用了window上面的方法,这个在网页上面都有这个window对象,直接用就行
const btnClick = () => {
    window.ReactNativeWebView.postMessage({name:"我叫萧寂",age:22});
};

这样,当点击按钮触发上面的方法,RN都能同步实时打印到接收的数据(也不一定是按钮点击,只要触发window上面的这个postMessage方法就是可以的)

相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试