代码拉取完成,页面将自动刷新
注:从WeTrident项目提炼而来。
npm i @webank/wt-console --save
yarn add @webank/wt-console
App开发过程中,经常会遇到一个场景就是,测试说我遇到一个xxx问题,但是不能复现,之前比较多的解决方案是基于文件日志。我们自己使用过程中发现文件日志太重,而且测试同学取日志的学习成本太高。于是在web项目中开始使用类似vConsole这一类的工具,又因为我们主要使用到的日志查看和日志上传功能。因此我们在React Native实现了类似vConsole的功能,同时在陆续扩展一些功能。
正式使用之前可以先使用snack版本体验,在线示例: https://snack.expo.io/@erichua23/wt-console-demo
将TianYan
嵌入到App最外层View中:
import TianYan from '@webank/wt-console'
export default class SimpleApp extends Component {
render () {
return (
<View style={styles.container}>
{/* other view */}
{/* 添加下面一行代码即完成接入 */}
<TianYan />
</View>
)
}
}
默认会展示Console板块,内容类型Chrome中的Console板块。
Console插件支持三个参数:
showTimestamp
是否在日志前面展示时间戳。布尔类型,默认为falseignoreRedBox
是否忽略RN对console.error默认的处理(默认会展示红屏)。布尔类型,默认为falseignoreYellowBox
是否忽略RN对console.warn默认的处理(默认会在底部展示小黄条)。布尔类型,默认为false<TianYan
consoleOptions={{
showTimestamp: true, // 展示日志时间戳
ignoreRedBox: true, // 隐藏默认红屏
ignoreYellowBox: true // 隐藏默认小黄条
}}
/>
注:
ignoreRedBox
和ignoreYellowBox
:因为RN对警告的处理比较暴力,直接使用浮窗在底部拦截操作,遇到警告比较多的时候非常烦人。官方提供的了ignore的方式,但是用官方的ignore,又担心某些需要关心的警告被忽略。wt-console采用了折中的策略,将黄色警告条去除后都收拢到wt-console的图标上展示,出现warning的时候开发者可以自有选择当前是否需要继续查看warning的详细信息。如下代码将错误和警告都收拢到wt-console统一管理。默认会展示Network板块,展示应用中的网络请求信息。同时支持一键重发指定请求。
// 使用react-native-web进行演示
cd react-native-web-demo
npm i
npm run syncLib // 将 library 同步到 react-native-web-demo/src/ 下面
npm start // 将自动在浏览器打开
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。