Browse Source

Fix navigation tool bar ios (#1941)

* remove unused code from tabStyle

* improve dummy screen ui

* set list screen translucent navigation bar

* make RCCToolBarView to composite the UIRootView inside
Ran Greenberg 7 years ago
parent
commit
e21c8ac718

+ 0
- 5
example/src/app.js View File

@@ -34,13 +34,8 @@ Navigation.startTabBasedApp({
34 34
   animationType: Platform.OS === 'ios' ? 'slide-down' : 'fade',
35 35
   tabsStyle: {
36 36
     tabBarBackgroundColor: '#003a66',
37
-    navBarButtonColor: '#ffffff',
38 37
     tabBarButtonColor: '#ffffff',
39
-    navBarTextColor: '#ffffff',
40 38
     tabBarSelectedButtonColor: '#ff505c',
41
-    navigationBarColor: '#003a66',
42
-    navBarBackgroundColor: '#003a66',
43
-    statusBarColor: '#002b4c',
44 39
     tabFontFamily: 'BioRhyme-Bold',
45 40
   },
46 41
   appStyle: {

+ 29
- 3
example/src/screens/types/DummyScreen.js View File

@@ -6,11 +6,24 @@ import {
6 6
   Dimensions,
7 7
   Text,
8 8
   StyleSheet,
9
-  Button
9
+  Button,
10
+  PixelRatio
10 11
 } from 'react-native';
12
+import {NavigationToolBarIOS} from 'react-native-navigation';
11 13
 
14
+const {width} = Dimensions.get('window');
12 15
 
13
-class ListScreen extends Component {
16
+
17
+class DummyScreen extends Component {
18
+
19
+  static navigatorStyle = {
20
+    drawUnderNavBar: true,
21
+    navBarTranslucent:true,
22
+    navBarNoBorder: true,
23
+    navBarTextColor: 'black',
24
+    navBarButtonColor: 'black',
25
+
26
+  };
14 27
 
15 28
   render(){
16 29
     return (
@@ -20,6 +33,10 @@ class ListScreen extends Component {
20 33
         <Text>🤗</Text>
21 34
         <Text>{this.props.text}</Text>
22 35
 
36
+        <NavigationToolBarIOS key='segmented' translucent={true} style={styles.toolBarStyle}>
37
+          <Button title={"I Am NavigationToolBarIOS, Press Me"} onPress={() => alert('Thank You')}/>
38
+        </NavigationToolBarIOS>
39
+
23 40
 
24 41
       </View>
25 42
     );
@@ -30,9 +47,18 @@ const styles = StyleSheet.create({
30 47
   cellContainer: {
31 48
     flex: 1,
32 49
     paddingVertical: 30,
50
+  },
51
+  toolBarStyle: {
52
+    top: 64,
53
+    width: width,
54
+    position: 'absolute',
55
+    borderTopWidth: 0,
56
+    height: 66,
57
+    backgroundColor: 'transparent'
58
+
33 59
   }
34 60
 });
35 61
 
36 62
 
37 63
 
38
-module.exports = ListScreen;
64
+module.exports = DummyScreen;

+ 11
- 3
example/src/screens/types/ListScreen.js View File

@@ -31,9 +31,16 @@ const Colors = [
31 31
   "#bdc3c7",
32 32
   "#7f8c8d"
33 33
 ];
34
-const {height, width} = Dimensions.get('window');
35 34
 
36 35
 class ListScreen extends Component {
36
+  static navigatorStyle = {
37
+    drawUnderNavBar: true,
38
+    navBarTranslucent:true,
39
+    navBarButtonColor: 'black',
40
+    navBarTextColor: 'black'
41
+
42
+  };
43
+
37 44
   constructor(props){
38 45
     super(props);
39 46
     this.data = [];
@@ -57,14 +64,15 @@ class ListScreen extends Component {
57 64
   render(){
58 65
     return (
59 66
       <ScrollView
60
-        style={[{flex: 1, backgroundColor: 'transparent',}]}
67
+        style={[{flex: 1, backgroundColor: 'transparent'}]}
61 68
         scrollEnabled={true}
62 69
         scrollsToTop={false}
63 70
         scrollEventThrottle={100}
64 71
         automaticallyAdjustContentInsets={false}
65 72
         directionalLockEnabled={true}
66 73
         showsHorizontalScrollIndicator={false}
67
-        showsVerticalScrollIndicator={false}>
74
+        showsVerticalScrollIndicator={false}
75
+        contentOffset={{y: -64}}>
68 76
 
69 77
 
70 78
         {_.map(this.data, (o, i) => {

+ 14
- 4
ios/RCCToolBar/RCCToolBar.m View File

@@ -8,9 +8,10 @@
8 8
 
9 9
 #import "RCCToolBar.h"
10 10
 
11
-@interface RCCToolBarView : UIToolbar
11
+@interface RCCToolBarView : UIView
12 12
 
13 13
 @property (nonatomic) BOOL toolBarTranslucent;
14
+@property (nonatomic, strong) UIToolbar *toolbar;
14 15
 
15 16
 @end
16 17
 
@@ -22,7 +23,10 @@
22 23
     self = [super init];
23 24
     if (self)
24 25
     {
25
-        self.toolBarTranslucent = self.translucent;
26
+        self.toolBarTranslucent = self.toolbar.translucent;
27
+        self.backgroundColor = [UIColor clearColor];
28
+        self.toolbar = [[UIToolbar alloc] init];
29
+        [self addSubview:self.toolbar];
26 30
     }
27 31
     return self;
28 32
 }
@@ -31,7 +35,13 @@
31 35
 -(void)didMoveToWindow
32 36
 {
33 37
     [super didMoveToWindow];
34
-    self.translucent = self.toolBarTranslucent;
38
+    self.toolbar.translucent = self.toolBarTranslucent;
39
+}
40
+
41
+-(void)reactSetFrame:(CGRect)frame {
42
+    [super reactSetFrame:frame];
43
+    
44
+    self.toolbar.frame = self.bounds;
35 45
 }
36 46
 
37 47
 @end
@@ -54,4 +64,4 @@ RCT_CUSTOM_VIEW_PROPERTY(translucent, BOOL, RCCToolBarView)
54 64
 }
55 65
 
56 66
 
57
-@end
67
+@end