juiapp-vconsole

功能特性

1. 在日志面板中显示 console[log, warn, error, info] 的输出。
2. 网络请求列表及详细信息。
3. 可自定义的版本信息展示。

安装

$ yarn add juiapp-vconsole
// or
npm i juiapp-vconsole

Usage

可接受参数

interface PropsType {
  appInfo?: {}
  console?: boolean
  panels?: {
    title: string
    component: React.ReactNode
  }
}

import VConsole from '@grewer/react-native-vconsole'
/* INFO is optional */

// in render function
render() {
  return (
    <View>
        <VConsole
            // 使用 'react-native-config-reader' 库获获取额外信息
            appInfo={{
                原生构建类型: ConfigReader.BUILD_TYPE,
                原生版本号: ConfigReader.VERSION_NAME || ConfigReader.CFBundleShortVersionString,
                原生构建时间: ConfigReader.BUILD_TIME,
                热更新版本号: codePushStore.info.label,
                热更新详情: codePushStore.info.desc,
            }}
            // 另外的的面板
            panels={panels}
            // console.time 可辨别是否开启 debug 网页
            console={__DEV__ ? !console.time : true}
        />
    </View>
  )
}

Examples

Log Panel

Network Panel

Info Panel

extra Panel

可以用来显示任意东西, 此处我使用它来实现一个切换 请求路径的功能