Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 37bb2e4

Browse files
authored
Merge pull request #2 from itenl/dev-1.1.1
Dev 1.1.1
2 parents 1988532 + 96804cc commit 37bb2e4

File tree

7 files changed

+162
-52
lines changed

7 files changed

+162
-52
lines changed

‎README.md‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,23 @@
2727
```JavaScript
2828
npm install 'react-native-vdebug'
2929

30-
import VDebug, { setExternalContext } from 'react-native-vdebug';
30+
import VDebug, { initTrace, setExternalContext } from 'react-native-vdebug';
3131

32+
// Before component Render, perform Proxy Console/Network (Optional)
33+
initTrace()
34+
35+
// Context object when the command is executed (Optional)
3236
setExternalContext('your context')
3337

34-
return <VDebug info={{ obj: 'your object' }} />
38+
return <VDebug
39+
// Expansion panel (Optional)
40+
panels={[
41+
title:'your title',
42+
component: your component
43+
]}
44+
// Info panel (Optional)
45+
info={{ obj: 'your object' }}
46+
/>
3547

3648
```
3749

@@ -46,8 +58,4 @@ return <VDebug info={{ obj: 'your object' }} />
4658

4759
-------------------
4860

49-
`禁止商业用途 ❤ 研究学习范畴 ❤ 作者保留解释权`
50-
<br />
51-
Commercial use is forbidden and The author reserves the right of interpretion
52-
5361
[✶ MIT ✶](./LICENSE)

‎index.js‎

Lines changed: 91 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1+
import PropTypes from 'prop-types';
12
import React, { PureComponent } from 'react';
23
import { ScrollView, View, Text, TouchableOpacity, PanResponder, Animated, Dimensions, StyleSheet, TextInput, Keyboard, NativeModules, Platform, KeyboardAvoidingView } from 'react-native';
34
import event from './src/event';
45
import Network, { traceNetwork } from './src/network';
56
import Log, { traceLog } from './src/log';
67
import Info from './src/info';
8+
import HocComp from './src/hoc';
9+
710
const { width, height } = Dimensions.get('window');
811

912
let commandContext = global;
@@ -19,29 +22,31 @@ export const initTrace = () => {
1922
};
2023

2124
class VDebug extends PureComponent {
25+
static propTypes = {
26+
// Info panel (Optional)
27+
info: PropTypes.object,
28+
// Expansion panel (Optional)
29+
panels: PropTypes.array
30+
};
31+
32+
static defaultProps = {
33+
info: {},
34+
panels: null
35+
};
36+
2237
constructor(props) {
2338
super(props);
2439
initTrace();
40+
this.containerHeight = (height / 3) * 2;
41+
this.refsObj = {};
2542
this.state = {
2643
commandValue: '',
2744
showPanel: false,
2845
currentPageIndex: 0,
2946
pan: new Animated.ValueXY(),
3047
scale: new Animated.Value(1),
31-
panels: [
32-
{
33-
title: 'Log',
34-
component: <Log />
35-
},
36-
{
37-
title: 'Network',
38-
component: <Network />
39-
},
40-
{
41-
title: 'Info',
42-
component: <Info info={this.props.info || {}} />
43-
}
44-
]
48+
panelHeight: new Animated.Value(0),
49+
panels: this.addPanels()
4550
};
4651
this.panResponder = PanResponder.create({
4752
onStartShouldSetPanResponder: () => true,
@@ -54,7 +59,7 @@ class VDebug extends PureComponent {
5459
Animated.spring(this.state.scale, {
5560
useNativeDriver: true,
5661
toValue: 1.3,
57-
friction: 3
62+
friction: 7
5863
}).start();
5964
},
6065
onPanResponderMove: Animated.event([null, { dx: this.state.pan.x, dy: this.state.pan.y }]),
@@ -64,7 +69,7 @@ class VDebug extends PureComponent {
6469
Animated.spring(this.state.scale, {
6570
useNativeDriver: true,
6671
toValue: 1,
67-
friction: 3
72+
friction: 7
6873
}).start(() => {
6974
this.setState({
7075
top: nativeEvent.pageY
@@ -80,10 +85,43 @@ class VDebug extends PureComponent {
8085
this.state.pan.setValue({ x: 0, y: 0 });
8186
}
8287

88+
getRef(index) {
89+
return ref => {
90+
if (!this.refsObj[index]) this.refsObj[index] = ref;
91+
};
92+
}
93+
94+
addPanels() {
95+
let defaultPanels = [
96+
{
97+
title: 'Log',
98+
component: HocComp(Log, this.getRef(0))
99+
},
100+
{
101+
title: 'Network',
102+
component: HocComp(Network, this.getRef(1))
103+
},
104+
{
105+
title: 'Info',
106+
component: HocComp(Info, this.getRef(2)),
107+
props: { info: this.props.info }
108+
}
109+
];
110+
if (this.props.panels && this.props.panels.length) {
111+
this.props.panels.forEach((item, index) => {
112+
// support up to five extended panels
113+
if (index >= 3) return;
114+
if (item.title && item.component) {
115+
item.component = HocComp(item.component, this.getRef(defaultPanels.length));
116+
defaultPanels.push(item);
117+
}
118+
});
119+
}
120+
return defaultPanels;
121+
}
122+
83123
togglePanel() {
84-
this.setState(state => ({
85-
showPanel: !state.showPanel
86-
}));
124+
this.state.panelHeight.setValue(this.state.panelHeight._value ? 0 : this.containerHeight);
87125
}
88126

89127
clearLogs() {
@@ -134,15 +172,30 @@ class VDebug extends PureComponent {
134172
}
135173
}
136174

175+
scrollToTop() {
176+
const item = this.refsObj[this.state.currentPageIndex];
177+
const instance = item?.getScrollRef && item?.getScrollRef();
178+
if (instance) {
179+
// FlatList
180+
instance.scrollToOffset && instance.scrollToOffset({ animated: true, viewPosition: 0, index: 0 });
181+
// ScrollView
182+
instance.scrollTo && instance.scrollTo({ x: 0, y: 0, animated: true });
183+
}
184+
}
185+
137186
renderPanelHeader() {
138187
return (
139188
<View style={styles.panelHeader}>
140189
{this.state.panels.map((item, index) => (
141190
<TouchableOpacity
142191
key={index.toString()}
143192
onPress={() => {
144-
this.scrollToPage(index);
145-
this.setState({ currentPageIndex: index });
193+
if (index != this.state.currentPageIndex) {
194+
this.scrollToPage(index);
195+
this.setState({ currentPageIndex: index });
196+
} else {
197+
this.scrollToTop();
198+
}
146199
}}
147200
style={[styles.panelHeaderItem, index === this.state.currentPageIndex && styles.activeTab]}
148201
>
@@ -155,7 +208,7 @@ class VDebug extends PureComponent {
155208

156209
renderCommandBar() {
157210
return (
158-
<View style={styles.commandBar}>
211+
<KeyboardAvoidingViewkeyboardVerticalOffset={Platform.OS=='android' ? 0 : 300}contentContainerStyle={{flex: 1,flexDirection: 'row'}}behavior={'position'} style={styles.commandBar}>
159212
<TextInput
160213
ref={ref => {
161214
this.textInput = ref;
@@ -172,7 +225,7 @@ class VDebug extends PureComponent {
172225
<TouchableOpacity style={styles.commandBarBtn} onPress={this.execCommand.bind(this)}>
173226
<Text>OK</Text>
174227
</TouchableOpacity>
175-
</View>
228+
</KeyboardAvoidingView>
176229
);
177230
}
178231

@@ -204,7 +257,7 @@ class VDebug extends PureComponent {
204257

205258
renderPanel() {
206259
return (
207-
<KeyboardAvoidingViewbehavior={Platform.OS==='ios' ? 'padding' : 'height'}style={styles.panel}>
260+
<Animated.Viewstyle={[styles.panel,{height: this.state.panelHeight}]}>
208261
{this.renderPanelHeader()}
209262
<ScrollView
210263
onMomentumScrollEnd={this.onScrollAnimationEnd.bind(this)}
@@ -219,18 +272,18 @@ class VDebug extends PureComponent {
219272
{this.state.panels.map((item, index) => {
220273
return (
221274
<View key={index} style={{ width: width }}>
222-
{item.component}
275+
<item.component{...(item.props??{})}/>
223276
</View>
224277
);
225278
})}
226279
</ScrollView>
227280
{this.renderCommandBar()}
228281
{this.renderPanelFooter()}
229-
</KeyboardAvoidingView>
282+
</Animated.View>
230283
);
231284
}
232285

233-
renderHomeBtn() {
286+
renderDebugBtn() {
234287
const { pan, scale } = this.state;
235288
const [translateX, translateY] = [pan.x, pan.y];
236289
const btnStyle = { transform: [{ translateX }, { translateY }, { scale }] };
@@ -243,7 +296,12 @@ class VDebug extends PureComponent {
243296
}
244297

245298
render() {
246-
return this.state.showPanel ? this.renderPanel() : this.renderHomeBtn();
299+
return (
300+
<View style={{ flex: 1 }}>
301+
{this.renderPanel()}
302+
{this.renderDebugBtn()}
303+
</View>
304+
);
247305
}
248306
}
249307

@@ -253,14 +311,12 @@ const styles = StyleSheet.create({
253311
},
254312
panel: {
255313
position: 'absolute',
256-
zIndex: 999999999,
257-
elevation: 999999999,
314+
zIndex: 99998,
315+
elevation: 99998,
258316
backgroundColor: '#fff',
259317
width,
260-
height: (height / 3) * 2,
261318
bottom: 0,
262-
right: 0,
263-
flexDirection: 'column'
319+
right: 0
264320
},
265321
panelHeader: {
266322
width,
@@ -318,13 +374,13 @@ const styles = StyleSheet.create({
318374
alignItems: 'center',
319375
justifyContent: 'center',
320376
position: 'absolute',
321-
zIndex: 999999999,
377+
zIndex: 99999,
322378
bottom: height / 2,
323379
right: 0,
324380
shadowColor: 'rgb(18,34,74)',
325381
shadowOffset: { width: 0, height: 1 },
326382
shadowOpacity: 0.08,
327-
elevation: 0.4
383+
elevation: 99999
328384
},
329385
homeBtnText: {
330386
color: '#fff'

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-vdebug",
3-
"version": "1.1.0",
3+
"version": "1.1.1",
44
"description": "React-Native 调试工具",
55
"main": "index.js",
66
"scripts": {

‎src/hoc.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React, { PureComponent } from 'react';
2+
3+
export default (WrappedComponent, getRef = () => {}) => {
4+
return class Hoc extends PureComponent {
5+
constructor(props) {
6+
super(props);
7+
}
8+
render() {
9+
return (
10+
<WrappedComponent
11+
ref={comp => {
12+
this.comp = comp;
13+
getRef && getRef(comp);
14+
}}
15+
{...this.props}
16+
/>
17+
);
18+
}
19+
};
20+
};

‎src/info.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@ export default class Info extends Component {
2222
});
2323
}
2424

25+
getScrollRef() {
26+
return this.scrollView;
27+
}
28+
2529
componentDidMount() {
2630
let info = Object.assign(
2731
{
@@ -44,8 +48,15 @@ export default class Info extends Component {
4448

4549
render() {
4650
return (
47-
<ScrollView style={{ flex: 1, padding: 5 }}>
48-
<Text style={{ color: 'black' }}>{this.state.info}</Text>
51+
<ScrollView
52+
ref={ref => {
53+
this.scrollView = ref;
54+
}}
55+
style={{ flex: 1, padding: 5 }}
56+
>
57+
<Text selectable={true} style={{ color: 'black' }}>
58+
{this.state.info}
59+
</Text>
4960
<View style={{ marginTop: 1000 }}>
5061
<Text style={!this.state.enabled && { opacity: 0.05 }}>{`
5162
.::::.

‎src/log.js‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,10 @@ class Log extends Component {
7777
});
7878
}
7979

80+
getScrollRef() {
81+
return this.flatList;
82+
}
83+
8084
componentDidMount() {
8185
this.mountState = true;
8286
this.setState({
@@ -103,12 +107,6 @@ class Log extends Component {
103107
}
104108
};
105109

106-
scrollToEnd = () => {
107-
this.flatList.scrollToEnd({ animated: true });
108-
};
109-
110-
filterCenter() {}
111-
112110
ListHeaderComponent() {
113111
return (
114112
<View>
@@ -195,7 +193,6 @@ class Log extends Component {
195193
this.flatList = ref;
196194
}}
197195
legacyImplementation
198-
// onLayout={() => this.flatList.scrollToEnd({ animated: true })}
199196
// initialNumToRender={20}
200197
showsVerticalScrollIndicator
201198
extraData={this.state}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /