首页 > 其他分享 >React Native 页面调试工具 react-native-vdebug

React Native 页面调试工具 react-native-vdebug

时间:2023-10-31 11:07:07浏览次数:29  
标签:vdebug React createNativeStackNavigator setExternalContext react import initTrac


yarn add react-native-vdebug

import React from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { getRouter } from './config'
import { ErrorBoundary } from '../component/light'
import VDebug, { initTrace, setExternalContext } from 'react-native-vdebug'
import { View } from 'react-native'

const Stack = createNativeStackNavigator()

export default function Router() {
  // Before component Render, perform Proxy Console/Network (Optional)
  initTrace()

  // Context object when the command is executed (Optional)
  setExternalContext('your context')
  return (
    <ErrorBoundary>
      <Stack.Navigator initialRouteName="Index">{getRouter()}</Stack.Navigator>
      <View>
        <VDebug
          // Info panel (Optional)
          info={{ obj: 'your object' }}
        />
      </View>
    </ErrorBoundary>
  )
}

React Native 页面调试工具 react-native-vdebug_react native

 

React Native 页面调试工具 react-native-vdebug_javascript_02

 

React Native 页面调试工具 react-native-vdebug_Network_03

 

参考链接:

https://www.npmjs.com/package/react-native-vdebug

标签:vdebug,React,createNativeStackNavigator,setExternalContext,react,import,initTrac
From: https://blog.51cto.com/xutongbao/8102475

相关文章

  • React Native expo项目设置app顶部的状态栏
       importReactfrom'react'import{createNativeStackNavigator}from'@react-navigation/native-stack'import{getRouter}from'./config'import{ErrorBoundary}from'../component/light'importVDebug,{initT......
  • 彻底搞懂Reactor模型和Proactor模型
    在高性能的I/O设计中,有两个著名的模型:Reactor模型和Proactor模型,其中Reactor模型用于同步I/O,而Proactor模型运用于异步I/O操作。想要了解两种模型,需要了解一些IO、同步异步的基础知识,点击查看服务端的线程模型无论是Reactor模型还是Proactor模型,对于支持多连接的服务器,一般......
  • 使用react-native-drawer,跟着官网配置仍报错,Error: [Reanimated] `valueUnpacker` is
    在使用react-native-drawer组件时,编译项目报错试了许多的方法,最后通过在一篇博客中找到解决方法https://blog.csdn.net/lxyoucan/article/details/121851577因为在使用react-native-drawer时也需要使用react-native-reanimated,需要在babel.config.js增加如下第三行配置,然后重新......
  • React学习一:环境搭建、JSX基础、事件绑定、组件使用、样式控制
    一、概念React由Meta公司研发,是一个用于构建Web和原生交互界面的库。react中文文档地址:https://zh-hans.react.dev/learnReact的优势相较传统基于DOM开发的优势:组件化的开发方式;不错的性能相较于其他前端框架的优势:丰富的生态;跨平台支持二、环境搭建首先和vue项目一样,项目......
  • #yyds干货盘点#深度讲解React Props
    一、props的介绍当React遇到的元素是用户自定义的组件,它会将JSX属性作为单个对象传递给该组件,这个对象称之为“props”。函数声明的组件,会接受一个props形参,获取属性传递的参数functionComponentA(props){return<div>我是组件B:{props.value}</div>}如果函数组件需要prop......
  • React Router的使用方法和功能
    ReactRouter是一个用于处理路由的库,为React应用程序提供了路由管理功能,使得构建单页面应用(SPA)的导航变得更加简单和灵活。下面是ReactRouter的一些常见使用方法和功能:安装ReactRouter:使用npm或yarn安装ReactRouter。在项目根目录下运行以下命令:npminstallreact-router-dom或......
  • react
    使用jsx 使用js    ......
  • 给react native 添加transform translateY动画报错:Transform with key of "translateY
    初学reactnative,想实现一个相机扫描功能时,报错,报错描述如标题这是我的主要逻辑代码constfadeAnim=useRef(newAnimated.Value(0)).current;constmove=()=>{fadeAnim.setValue(0);Animated.timing(fadeAnim,{toValue:200,duration:20......
  • 2023-10-24 react+ts 遍历双重对象嵌套数组
    useEffect(()=>{if(value){constarr=value;for(constkinarr){console.log(k,arr[k]);arr[k].key=arr[k].id;arr[k].title=arr[k].name;for(constk2inarr[k].children){arr[k2]......
  • react native的新架构
    Startingfromversion0.68,ReactNativeprovidestheNewArchitecture,whichoffersdevelopersnewcapabilitiesforbuildinghighlyperformantandresponsiveapps. (https://reactnative.dev/docs/the-new-architecture/landing-page) PillarsoftheNewArch......