Browse Source

Add CustomButton screen to example app

Guy Carmeli 7 years ago
parent
commit
67d2c9eea4

+ 10
- 2
example/src/screens/NavigationTypes.js View File

@@ -1,8 +1,8 @@
1
-import React, {Component} from 'react';
1
+import React from 'react';
2 2
 import {StyleSheet, ScrollView} from 'react-native';
3 3
 import Row from '../components/Row';
4 4
 
5
-class NavigationTypes extends Component {
5
+class NavigationTypes extends React.Component {
6 6
 
7 7
   constructor(props) {
8 8
     super(props);
@@ -40,6 +40,13 @@ class NavigationTypes extends Component {
40 40
     });
41 41
   };
42 42
 
43
+  pushCustomButtonScreen = () => {
44
+    this.props.navigator.push({
45
+      screen: 'example.Types.CustomButtonScreen',
46
+      title: 'Custom Buttons'
47
+    });
48
+  };
49
+
43 50
   pushTopTabsScreen = () => {
44 51
     this.props.navigator.push({
45 52
       screen: 'example.Types.TopTabs',
@@ -93,6 +100,7 @@ class NavigationTypes extends Component {
93 100
         <Row title={'Toggle Drawer'} onPress={this.toggleDrawer}/>
94 101
         <Row title={'Push Screen'} testID={'pushScreen'} onPress={this.pushScreen}/>
95 102
         <Row title={'Custom TopBar'} onPress={this.pushCustomTopBarScreen}/>
103
+        <Row title={'Custom Button'} onPress={this.pushCustomButtonScreen}/>
96 104
         <Row title={'Top Tabs Screen'} onPress={this.pushTopTabsScreen} platform={'android'}/>
97 105
         <Row title={'Show Modal'} onPress={this.showModal}/>
98 106
         <Row title={'Show Lightbox'} onPress={this.showLightBox}/>

+ 2
- 0
example/src/screens/index.js View File

@@ -10,6 +10,7 @@ import LightBox from './types/LightBox';
10 10
 import Notification from './types/Notification';
11 11
 import Modal from './types/Modal';
12 12
 import CustomTopBarScreen from './types/CustomTopBarScreen';
13
+import CustomButtonScreen from './types/CustomButtonScreen';
13 14
 import TopTabs from './types/TopTabs';
14 15
 import TabOne from './types/tabs/TabOne';
15 16
 import TabTwo from './types/tabs/TabTwo';
@@ -35,6 +36,7 @@ export function registerScreens() {
35 36
   Navigation.registerComponent('example.Types.LightBox', () => LightBox);
36 37
   Navigation.registerComponent('example.Types.Notification', () => Notification);
37 38
   Navigation.registerComponent('example.Types.CustomTopBarScreen', () => CustomTopBarScreen);
39
+  Navigation.registerComponent('example.Types.CustomButtonScreen', () => CustomButtonScreen);
38 40
   Navigation.registerComponent('example.Types.TopTabs', () => TopTabs);
39 41
   Navigation.registerComponent('example.Types.TopTabs.TabOne', () => TabOne);
40 42
   Navigation.registerComponent('example.Types.TopTabs.TabTwo', () => TabTwo);

+ 75
- 0
example/src/screens/types/CustomButtonScreen.js View File

@@ -0,0 +1,75 @@
1
+import React from 'react';
2
+import {
3
+  View,
4
+  StyleSheet,
5
+  Text,
6
+  TouchableOpacity,
7
+  Button
8
+} from 'react-native';
9
+import {Navigation} from 'react-native-navigation';
10
+
11
+let navigator;
12
+const CustomButton = ({text}) =>
13
+  <TouchableOpacity
14
+    style={[styles.buttonContainer]}
15
+    onPress={() => navigator.pop()}
16
+  >
17
+    <View style={styles.button}>
18
+      <Text style={{ color: 'white' }}>{text}</Text>
19
+    </View>
20
+  </TouchableOpacity>;
21
+Navigation.registerComponent('CustomButton', () => CustomButton);
22
+
23
+export default class CustomButtonScreen extends React.Component {
24
+  static navigatorButtons = {
25
+    rightButtons: [
26
+      {
27
+        id: 'custom-button',
28
+        component: 'CustomButton',
29
+        passProps: {
30
+          text: 'Hi!'
31
+        }
32
+      }
33
+    ]
34
+  };
35
+
36
+  componentWillMount() {
37
+    navigator = this.props.navigator;
38
+  }
39
+
40
+  render() {
41
+    return (
42
+      <View style={styles.container}>
43
+        <Text>Custom Left Button</Text>
44
+      </View>
45
+    );
46
+  }
47
+
48
+  componentWillUnmount() {
49
+    navigator = null;
50
+  }
51
+}
52
+
53
+const styles = StyleSheet.create({
54
+  container: {
55
+    flex: 1,
56
+    alignItems: 'center',
57
+    justifyContent: 'center',
58
+    backgroundColor: 'white'
59
+  },
60
+  buttonContainer: {
61
+    width: 48,
62
+    height: 48,
63
+    justifyContent: 'center',
64
+    alignItems: 'center'
65
+  },
66
+  button: {
67
+    backgroundColor: 'tomato',
68
+    width: 34,
69
+    height: 34,
70
+    borderRadius: 34 / 2,
71
+    overflow: 'hidden',
72
+    justifyContent: 'center',
73
+    alignItems: 'center'
74
+  }
75
+});