1.1.7 • Published 5 years ago
react-native-debugtools v1.1.7
react-native-debugtools是一个简单的针对RN开发实际需要而做的一个app端调试工具集,目前主要包括两个主要功能,
- 切换测试环境
- 查看网络日志 其他计划中功能
- 扫描二维码打开Webview
- 添加原生交互日志(针对原生RN混合开发模式)
效果
使用方式
npm install react-native-debugtools --save
目前主要暴露出两个方法initDTs与generateDebugBtn以及两个对象debugRoute与storage,以下为具体使用Demo
import {
initDTs,
debugRoute,
generateDebugBtn,
storage
} from 'react-native-debugtools'
class App extends Component {
...
componentWillMount() {
initDTs({
envList: ['env1', 'env2', 'env3'],
currentEnv: this.state.curEnv
})
}
componentDidMount() {
generateDebugBtn(this.props.navigation, null)
}
render() {
return (
<View style={styles.page}>
<View style={styles.container_top}>
<Text style={styles.welcome}>debug demos</Text>
</View>
</View>
);
}
}
const AppWithDebug = createStackNavigator({
Home: {
screen: App
},
...debugRoute
});
export default class AppEntry extends Component {
render() {
return <AppWithDebug screenProps={ this.props }/>
}
};
首先在项目路由中添加debug路由节点
const AppWithDebug = createStackNavigator({
Home: {
screen: App
},
...debugRoute
});
在你的项目Root组件中调用初始化函数,进行环境列表、当前环境的设置存储以及开启http监听器: initDTs({ envList: 'online', 'test', 'develop', // 环境列表,如线上、测试、开发 curEnv: 'online' // 指定当前环境未指定时,初始化默认选择环境列表第一项为当前环境 })
在根页面中调用generateDebugBtn函数,初始化debug控制容器 generateDebugBtn(navigation, envSwitchCallBack) // navigation即当前环境的this.props.navigation对象,envSwitchCallBack为切换环境之后的回调函数