瀏覽代碼

Set reactView in TopBar dynamically

Guy Carmeli 8 年之前
父節點
當前提交
f14e4bbaf5
共有 2 個檔案被更改,包括 11 行新增13 行删除
  1. 2
    2
      example/src/screens/types/CustomTopBar.js
  2. 9
    11
      example/src/screens/types/CustomTopBarScreen.js

+ 2
- 2
example/src/screens/types/CustomTopBar.js 查看文件

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 查看文件

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
 });