Преглед изворни кода

Add list screen for debug usage (#1940)

* add list screen for debug behaviours

* add dummy screen

* ui changes in ListScreen

* add push list screen function without add it to the button to the screen

* add and comment push list screen row
Ran Greenberg пре 7 година
родитељ
комит
c6a5046ef4

+ 9
- 0
example/src/screens/NavigationTypes.js Прегледај датотеку

@@ -34,6 +34,14 @@ class NavigationTypes extends React.Component {
34 34
     });
35 35
   };
36 36
 
37
+  pushListScreen = () => {
38
+    console.log('RANG', 'pushListScreen');
39
+    this.props.navigator.push({
40
+      screen: 'example.Types.ListScreen',
41
+      title: 'List Screen',
42
+    });
43
+  };
44
+
37 45
   pushCustomTopBarScreen = () => {
38 46
     this.props.navigator.push({
39 47
       screen: 'example.Types.CustomTopBarScreen'
@@ -99,6 +107,7 @@ class NavigationTypes extends React.Component {
99 107
       <ScrollView style={styles.container}>
100 108
         <Row title={'Toggle Drawer'} onPress={this.toggleDrawer}/>
101 109
         <Row title={'Push Screen'} testID={'pushScreen'} onPress={this.pushScreen}/>
110
+        {/*<Row title={'Push List Screen'} testID={'pushListScreen'} onPress={this.pushListScreen}/>*/}
102 111
         <Row title={'Custom TopBar'} onPress={this.pushCustomTopBarScreen}/>
103 112
         <Row title={'Custom Button'} onPress={this.pushCustomButtonScreen}/>
104 113
         <Row title={'Top Tabs Screen'} onPress={this.pushTopTabsScreen} platform={'android'}/>

+ 4
- 0
example/src/screens/index.js Прегледај датотеку

@@ -6,6 +6,8 @@ import Transitions from './Transitions';
6 6
 
7 7
 import Push from './types/Push';
8 8
 import Drawer from './types/Drawer';
9
+import ListScreen from './types/ListScreen';
10
+import DummyScreen from './types/DummyScreen';
9 11
 import LightBox from './types/LightBox';
10 12
 import Notification from './types/Notification';
11 13
 import Modal from './types/Modal';
@@ -32,6 +34,8 @@ export function registerScreens() {
32 34
   Navigation.registerComponent('example.Types.Push', () => Push);
33 35
   Navigation.registerComponent('example.Types.Drawer', () => Drawer);
34 36
   Navigation.registerComponent('example.Types.Screen', () => Drawer);
37
+  Navigation.registerComponent('example.Types.ListScreen', () => ListScreen);
38
+  Navigation.registerComponent('example.Types.DummyScreen', () => DummyScreen);
35 39
   Navigation.registerComponent('example.Types.Modal', () => Modal);
36 40
   Navigation.registerComponent('example.Types.LightBox', () => LightBox);
37 41
   Navigation.registerComponent('example.Types.Notification', () => Notification);

+ 38
- 0
example/src/screens/types/DummyScreen.js Прегледај датотеку

@@ -0,0 +1,38 @@
1
+import _ from 'lodash';
2
+import React, { Component } from 'react';
3
+import {
4
+  View,
5
+  ScrollView,
6
+  Dimensions,
7
+  Text,
8
+  StyleSheet,
9
+  Button
10
+} from 'react-native';
11
+
12
+
13
+class ListScreen extends Component {
14
+
15
+  render(){
16
+    return (
17
+      <View
18
+        style={[{flex: 1, justifyContent: 'center', alignItems:'center', backgroundColor: this.props.bgColor,}]}>
19
+
20
+        <Text>🤗</Text>
21
+        <Text>{this.props.text}</Text>
22
+
23
+
24
+      </View>
25
+    );
26
+  }
27
+}
28
+
29
+const styles = StyleSheet.create({
30
+  cellContainer: {
31
+    flex: 1,
32
+    paddingVertical: 30,
33
+  }
34
+});
35
+
36
+
37
+
38
+module.exports = ListScreen;

+ 101
- 0
example/src/screens/types/ListScreen.js Прегледај датотеку

@@ -0,0 +1,101 @@
1
+import _ from 'lodash';
2
+import React, { Component } from 'react';
3
+import {
4
+  View,
5
+  ScrollView,
6
+  Dimensions,
7
+  Text,
8
+  StyleSheet,
9
+  Button
10
+} from 'react-native';
11
+
12
+const Colors = [
13
+  "#1abc9c",
14
+  "#2ecc71",
15
+  "#3498db",
16
+  "#9b59b6",
17
+  "#34495e",
18
+  "#16a085",
19
+  "#27ae60",
20
+  "#2980b9",
21
+  "#8e44ad",
22
+  "#2c3e50",
23
+  "#f1c40f",
24
+  "#e67e22",
25
+  "#e74c3c",
26
+  "#ecf0f1",
27
+  "#95a5a6",
28
+  "#f39c12",
29
+  "#d35400",
30
+  "#c0392b",
31
+  "#bdc3c7",
32
+  "#7f8c8d"
33
+];
34
+const {height, width} = Dimensions.get('window');
35
+
36
+class ListScreen extends Component {
37
+  constructor(props){
38
+    super(props);
39
+    this.data = [];
40
+    const numberOfItems = 100;
41
+    for (i = 0; i < numberOfItems; i++) {
42
+      this.data.push({text:`cell ${i}`, tapCount: 0, id: i});
43
+    }
44
+  }
45
+
46
+  _onButtonPressed(i, color) {
47
+    this.props.navigator.push({
48
+      screen: 'example.Types.DummyScreen',
49
+      title: 'Dummy',
50
+      passProps: {
51
+        text: i,
52
+        bgColor: color
53
+      }
54
+    });
55
+  }
56
+
57
+  render(){
58
+    return (
59
+      <ScrollView
60
+        style={[{flex: 1, backgroundColor: 'transparent',}]}
61
+        scrollEnabled={true}
62
+        scrollsToTop={false}
63
+        scrollEventThrottle={100}
64
+        automaticallyAdjustContentInsets={false}
65
+        directionalLockEnabled={true}
66
+        showsHorizontalScrollIndicator={false}
67
+        showsVerticalScrollIndicator={false}>
68
+
69
+
70
+        {_.map(this.data, (o, i) => {
71
+          const color = getRandomColor(i);
72
+          return (
73
+            <View key={o.id} style={[styles.cellContainer, {backgroundColor: color}]}>
74
+              <Button title={o.text} onPress={() => {
75
+                this._onButtonPressed(i, color);
76
+              }}>
77
+              </Button>
78
+            </View>
79
+          );
80
+        })}
81
+
82
+
83
+      </ScrollView>
84
+    );
85
+  }
86
+}
87
+
88
+function getRandomColor(index) {
89
+  return Colors[index % Colors.length];
90
+}
91
+
92
+const styles = StyleSheet.create({
93
+  cellContainer: {
94
+    flex: 1,
95
+    paddingVertical: 30,
96
+  }
97
+});
98
+
99
+
100
+
101
+module.exports = ListScreen;