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
   View,
4
   View,
5
   TouchableOpacity,
5
   TouchableOpacity,
6
   Text,
6
   Text,
7
+  Alert,
7
   Platform
8
   Platform
8
 } from 'react-native';
9
 } from 'react-native';
9
 
10
 
17
   render() {
18
   render() {
18
     return (
19
     return (
19
       <View style={styles.container}>
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
           <Text style={styles.text}>Press Me</Text>
22
           <Text style={styles.text}>Press Me</Text>
22
         </TouchableOpacity>
23
         </TouchableOpacity>
23
-
24
       </View>
24
       </View>
25
     );
25
     );
26
   }
26
   }

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

6
 } from 'react-native';
6
 } from 'react-native';
7
 import {Navigation} from 'react-native-navigation';
7
 import {Navigation} from 'react-native-navigation';
8
 import CustomTopBar from './CustomTopBar';
8
 import CustomTopBar from './CustomTopBar';
9
+
9
 Navigation.registerComponent('example.CustomTopBar', () => CustomTopBar);
10
 Navigation.registerComponent('example.CustomTopBar', () => CustomTopBar);
10
 
11
 
11
 export default class CustomTopBarScreen extends Component {
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
   render() {
21
   render() {
20
     return (
22
     return (
21
       <View style={styles.container}>
23
       <View style={styles.container}>
22
-        <Text style={styles.text}>Custom component in TopBar</Text>
24
+        <Text>Custom component in TopBar</Text>
23
       </View>
25
       </View>
24
     );
26
     );
25
   }
27
   }
26
-
27
 }
28
 }
28
 
29
 
29
 const styles = StyleSheet.create({
30
 const styles = StyleSheet.create({
32
     alignItems: 'center',
33
     alignItems: 'center',
33
     justifyContent: 'center',
34
     justifyContent: 'center',
34
     backgroundColor: 'white'
35
     backgroundColor: 'white'
35
-  },
36
-  text: {
37
-
38
   }
36
   }
39
 });
37
 });