Browse Source

Set reactView in TopBar dynamically

Guy Carmeli 7 years ago
parent
commit
f14e4bbaf5

+ 2
- 2
example/src/screens/types/CustomTopBar.js View File

@@ -4,6 +4,7 @@ import {
4 4
   View,
5 5
   TouchableOpacity,
6 6
   Text,
7
+  Alert,
7 8
   Platform
8 9
 } from 'react-native';
9 10
 
@@ -17,10 +18,9 @@ export default class CustomTopBar extends Component {
17 18
   render() {
18 19
     return (
19 20
       <View style={styles.container}>
20
-        <TouchableOpacity stye={styles.button} onPress={ () => alert('Thanks for that :)') }>
21
+        <TouchableOpacity stye={styles.button} onPress={ () => Alert.alert(this.props.title, 'Thanks for that :)') }>
21 22
           <Text style={styles.text}>Press Me</Text>
22 23
         </TouchableOpacity>
23
-
24 24
       </View>
25 25
     );
26 26
   }

+ 9
- 11
example/src/screens/types/CustomTopBarScreen.js View File

@@ -6,24 +6,25 @@ import {
6 6
 } from 'react-native';
7 7
 import {Navigation} from 'react-native-navigation';
8 8
 import CustomTopBar from './CustomTopBar';
9
+
9 10
 Navigation.registerComponent('example.CustomTopBar', () => CustomTopBar);
10 11
 
11 12
 export default class CustomTopBarScreen extends Component {
12
-  static navigatorStyle = {
13
-    drawUnderTabBar: true,
14
-    navBarCustomView: 'example.CustomTopBar',
15
-    navBarComponentAlignment: 'center',
16
-    navBarCustomViewInitialProps: {name: 'Hi Custom'}
17
-  };
13
+  componentDidMount() {
14
+    this.props.navigator.setStyle({
15
+      navBarCustomView: 'example.CustomTopBar',
16
+      navBarComponentAlignment: 'center',
17
+      navBarCustomViewInitialProps: {title: 'Hi Custom'}
18
+    });
19
+  }
18 20
 
19 21
   render() {
20 22
     return (
21 23
       <View style={styles.container}>
22
-        <Text style={styles.text}>Custom component in TopBar</Text>
24
+        <Text>Custom component in TopBar</Text>
23 25
       </View>
24 26
     );
25 27
   }
26
-
27 28
 }
28 29
 
29 30
 const styles = StyleSheet.create({
@@ -32,8 +33,5 @@ const styles = StyleSheet.create({
32 33
     alignItems: 'center',
33 34
     justifyContent: 'center',
34 35
     backgroundColor: 'white'
35
-  },
36
-  text: {
37
-
38 36
   }
39 37
 });