-
前提
通常我在公司做Rn开发。主要是做组件开发,包括业务组件。项目的框架。全局处理。 今天遇到一个问题:就是在使用可触控范围时,经常出现可点击范围过小问题。 解决思路:在原有的可点击组件上,如果可控范围比较小,就在原有props增加调试属性(这里只是显示简单的边框 来提醒其他开发者的注意)。 难点: 在测试过程中 如果测试人员发现边框问题,肯定会提出问题。这里仅仅希望Rn开发人员看到,并且修改。 思路: 在开启远程调试时开启高亮提醒(测试人员一般都不会开启chrome远程调试)
-
解决思路
-
开启debugger 都需要摇一摇 开启debugger
-
查看 ios | android 的源码可以发现一种可行方案 就是自己编写原生代码提供给js使用
- android DevInterndSetting.java
- ios RCTDevSetting.m
- 是否开启远程调试 可以通过属性查看
-
我们进行调试都会在chrome浏览器中另外开启一个窗口
-
查看 http://localhost:8081/debugger-ui/ 源码
- 测试发现 开启远程调试 就会连接WS
function connectToDebuggerProxy() { const ws = new WebSocket('ws://' + window.location.host + '/debugger-proxy?role=debugger&name=Chrome'); let worker; function createJSRuntime() { worker = new Worker('debuggerWorker.js'); worker.onmessage = function(message) { ws.send(JSON.stringify(message.data)); }; window.onbeforeunload = function() { return 'If you reload this page, it is going to break the debugging session. ' + 'You should press' + refreshShortcut + 'in simulator to reload.'; }; updateVisibility(); } function shutdownJSRuntime() { } function updateVisibility() { } ws.onopen = function() { }; ws.onmessage = async function(message) { if (!message.data) { return; } const object = JSON.parse(message.data); if (object.$event === 'client-disconnected') { shutdownJSRuntime(); Page.setState({status: {type: 'disconnected'}}); return; } if (!object.method) { return; } if (object.method === 'prepareJSRuntime') {} else if (object.method === '$disconnected') {} else if (object.method === 'executeApplicationScript') {} else {} }; ws.onclose = function(error) { }; }
-
-
JS运行环境总结
-
开启远程调试
- 1:chorme 打开网页
- 2:手机打开App 开启远程调试 连接网页Ws 传递参数
- 3:chrome网页连接 react-native服务器 加载js代码 运行
- 4:chrome保持和手机通讯 ==>React-native手机环境 展示页面
-
不开启远程调试
- 1:连接React-native代码服务器
- 2:手机本地的js运行环境运行 react - js代码
- 3:js环境和原生环境通讯 UI展示
-
-
解决
提供判断js运行环境来判断是否开启远程调试
/** * react-native JS代码运行环境 */ export const EnvirType = { /** * WIndow 浏览器 运行环境 */ WINDOWS: "win", /** * MAC 浏览器 运行环境 */ MACINTOSH: "mac", /*** * Linux 浏览器 运行环境 */ LINUX: "linux", /*** * ios 浏览器 运行环境 */ IOS: "iOS", /** * 安卓 浏览器 运行环境 */ ANDROID: "Android", /** * 黑莓 运行环境 */ BLACKBERRY: "bb", /*** * Win iphone 运行环境 */ WINDOWS_PHONE: "winphone", /** * React-Native 运行环境 * 直接运行在手机上的React-native环境 */ REACTNATIVE: "react-native" } /** * 是否为 rn 代码 */ export function isReactNative() { let GLOBAL = global || window; return GLOBAL && GLOBAL.ReactNative && GLOBAL.ReactNative.NativeModules } /** * 是否开启远程debugger */ export function isStartReactRemoveDebugger() { let currentEnvName = getJSEnvironment().name; return isReactNative() && ( currentEnvName == EnvirType.WINDOWS || currentEnvName == EnvirType.MACINTOSH || currentEnvName == EnvirType.LINUX ) } /** * 是否关闭远程debugger */ export function isCloseRemoveDebugger(){ return isReactNative() && getJSEnvironment().name == EnvirType.REACTNATIVE; } /** * @return {name:EnvirType,versionStr:""} */ export function getJSEnvironment() { if (navigator.userAgent) { var userAgent = navigator.userAgent; var platform, result; function getDesktopOS() { var pf = navigator.platform; if (pf.indexOf("Win") != -1) { // 说明当前是Windows操作系统 var rVersion = /Windows NT (\d+).(\d)/i; var uaResult = userAgent.match(rVersion); var sVersionStr = ""; if (uaResult[1] == "6") { if (uaResult[2] == 1) { sVersionStr = "7"; // 说明当前运行在Windows 7 中 } else if (uaResult[2] > 1) { sVersionStr = "8"; // 说明当前运行在Windows 8 中 } } else { sVersionStr = uaResult[1]; } return { "name": EnvirType.WINDOWS, "versionStr": sVersionStr }; } else if (pf.indexOf("Mac") != -1) { return { "name": EnvirType.MACINTOSH, "versionStr": "" }; // Macintosh操作系统 } else if (pf.indexOf("Linux") != -1) { return { "name": EnvirType.LINUX, "versionStr": "" }; // 说明当前运行在Linux操作系统 } return null; } platform = /Windows Phone (?:OS )?([\d.]*)/; // windows phone的正则表达式 result = userAgent.match(platform); if (result) { return ({ "name": EnvirType.WINDOWS_PHONE, "versionStr": result[1] }); } // BlackBerry 10 if (userAgent.indexOf("(BB10;") > 0) { platform = /\sVersion\/([\d.]+)\s/; // BlackBerry的regular expression result = userAgent.match(platform); if (result) { return { "name": EnvirType.BLACKBERRY, "versionStr": result[1] }; } else { return { "name": EnvirType.BLACKBERRY, "versionStr": '10' }; } } // iOS, Android, BlackBerry 6.0+: platform = /\(([a-zA-Z ]+);\s(?:[U]?[;]?)([\D]+)((?:[\d._]*))(?:.*[\)][^\d]*)([\d.]*)\s/; result = userAgent.match(platform); if (result) { var appleDevices = /iPhone|iPad|iPod/; var bbDevices = /PlayBook|BlackBerry/; if (result[0].match(appleDevices)) { result[3] = result[3].replace(/_/g, "."); return ({ "name": EnvirType.IOS, "versionStr": result[3] }); // iOS操作系统 } else if (result[2].match(/Android/)) { result[2] = result[2].replace(/\s/g, ""); return ({ "name": EnvirType.ANDROID, "versionStr": result[3] }); // Android操作系统 } else if (result[0].match(bbDevices)) { return ({ "name": EnvirType.BLACKBERRY, "versionStr": result[4] }); // Blackberry } } //Android平台上的Firefox浏览器 platform = /\((Android)[\s]?([\d][.\d]*)?;.*Firefox\/[\d][.\d]*/; result = userAgent.match(platform); if (result) { return ({ "name": EnvirType.ANDROID, "versionStr": result.length == 3 ? result[2] : "" }); } // Desktop return getDesktopOS(); } else { return { "name": EnvirType.REACTNATIVE, "versionStr": "" } } }
-
总结
-
了解react-native运行过程
-
解决一些困惑问题
- 在开发过程中,会遇到开发的功能是完整可行的。打包给测试人员就会发现存在问题(两者JS代码运行环境不同导致的问题)
-
React-native JS运行环境。判断运行环境
最新推荐文章于 2023-08-17 00:30:00 发布