Browse Source

Update styling-the-navigator.md (#1099)

Separated iOS and Android only properties.
Johan 7 years ago
parent
commit
7ea6f85545
1 changed files with 14 additions and 9 deletions
  1. 14
    9
      docs/styling-the-navigator.md

+ 14
- 9
docs/styling-the-navigator.md View File

24
 
24
 
25
 ```js
25
 ```js
26
 {
26
 {
27
-  navigationBarColor: '#000000', // change the background color of the bottom native navigation bar. Android only
27
+  // Common
28
   navBarTextColor: '#000000', // change the text color of the title (remembered across pushes)
28
   navBarTextColor: '#000000', // change the text color of the title (remembered across pushes)
29
   navBarTextFontFamily: 'font-name', // Changes the title font
29
   navBarTextFontFamily: 'font-name', // Changes the title font
30
-  navBarTitleTextCentered: true, // Android only. centers the title, default false.
31
   navBarBackgroundColor: '#f7f7f7', // change the background color of the nav bar (remembered across pushes)
30
   navBarBackgroundColor: '#f7f7f7', // change the background color of the nav bar (remembered across pushes)
32
 
31
 
33
   navBarButtonColor: '#007aff', // Change color of nav bar buttons (eg. the back button) (remembered across pushes)
32
   navBarButtonColor: '#007aff', // Change color of nav bar buttons (eg. the back button) (remembered across pushes)
46
   navBarHideOnScroll: false, // make the nav bar hidden only after the user starts to scroll
45
   navBarHideOnScroll: false, // make the nav bar hidden only after the user starts to scroll
47
   navBarTranslucent: false, // make the nav bar semi-translucent, works best with drawUnderNavBar:true
46
   navBarTranslucent: false, // make the nav bar semi-translucent, works best with drawUnderNavBar:true
48
   navBarTransparent: false, // make the nav bar transparent, works best with drawUnderNavBar:true,
47
   navBarTransparent: false, // make the nav bar transparent, works best with drawUnderNavBar:true,
49
-  topBarElevationShadowEnabled: false, // Android only, default: true. Disables TopBar elevation shadow on Lolipop and above
50
   navBarNoBorder: false, // hide the navigation bar bottom border (hair line). Default false
48
   navBarNoBorder: false, // hide the navigation bar bottom border (hair line). Default false
51
   drawUnderNavBar: false, // draw the screen content under the nav bar, works best with navBarTranslucent:true
49
   drawUnderNavBar: false, // draw the screen content under the nav bar, works best with navBarTranslucent:true
52
   drawUnderTabBar: false, // draw the screen content under the tab bar (the tab bar is always translucent)
50
   drawUnderTabBar: false, // draw the screen content under the tab bar (the tab bar is always translucent)
53
   statusBarBlur: false, // blur the area under the status bar, works best with navBarHidden:true
51
   statusBarBlur: false, // blur the area under the status bar, works best with navBarHidden:true
54
   navBarBlur: false, // blur the entire nav bar, works best with drawUnderNavBar:true
52
   navBarBlur: false, // blur the entire nav bar, works best with drawUnderNavBar:true
55
   tabBarHidden: false, // make the screen content hide the tab bar (remembered across pushes)
53
   tabBarHidden: false, // make the screen content hide the tab bar (remembered across pushes)
56
-  statusBarColor: '#000000', // change the color of the status bar. Android only
57
   statusBarHideWithNavBar: false // hide the status bar if the nav bar is also hidden, useful for navBarHidden:true
54
   statusBarHideWithNavBar: false // hide the status bar if the nav bar is also hidden, useful for navBarHidden:true
58
   statusBarHidden: false, // make the status bar hidden regardless of nav bar state
55
   statusBarHidden: false, // make the status bar hidden regardless of nav bar state
59
   statusBarTextColorScheme: 'dark', // text color of status bar, 'dark' / 'light' (remembered across pushes)
56
   statusBarTextColorScheme: 'dark', // text color of status bar, 'dark' / 'light' (remembered across pushes)
60
   statusBarTextColorSchemeSingleScreen: 'light' // same as statusBarTextColorScheme but does NOT remember across pushes
57
   statusBarTextColorSchemeSingleScreen: 'light' // same as statusBarTextColorScheme but does NOT remember across pushes
61
-  collapsingToolBarImage: "http://lorempixel.com/400/200/", // Collapsing Toolbar image. Android only
62
-  collapsingToolBarImage: require('../../img/topbar.jpg'), // Collapsing Toolbar image. Either use a url or require a local image. Android only
63
-  collapsingToolBarCollapsedColor: '#0f2362', // Collapsing Toolbar scrim color. Android only
64
   navBarSubtitleColor: 'red', // subtitle color
58
   navBarSubtitleColor: 'red', // subtitle color
65
   screenBackgroundColor: 'white', // Default screen color, visible before the actual react view is rendered
59
   screenBackgroundColor: 'white', // Default screen color, visible before the actual react view is rendered
66
   orientation: 'portrait' // Sets a specific orientation to a modal and all screens pushed to it. Default: 'auto'. Supported values: 'auto', 'landscape', 'portrait'
60
   orientation: 'portrait' // Sets a specific orientation to a modal and all screens pushed to it. Default: 'auto'. Supported values: 'auto', 'landscape', 'portrait'
67
-  disabledBackGesture: false, // disable the back gesture (swipe gesture) in order to pop the top screen. Default is false. iOS Only
68
-  screenBackgroundImageName: '<name of image in Images.xcassets>', // Optional. default screen background image. iOS only
61
+  
62
+  // iOS only
63
+  disabledBackGesture: false, // default: false. Disable the back gesture (swipe gesture) in order to pop the top screen. 
64
+  screenBackgroundImageName: '<name of image in Images.xcassets>', // Optional. default screen background image.
65
+  
66
+  // Android only
67
+  navigationBarColor: '#000000', // change the background color of the bottom native navigation bar.
68
+  navBarTitleTextCentered: true, // default: false. centers the title.
69
+  topBarElevationShadowEnabled: false, // default: true. Disables TopBar elevation shadow on Lolipop and above
70
+  statusBarColor: '#000000', // change the color of the status bar.
71
+  collapsingToolBarImage: "http://lorempixel.com/400/200/", // Collapsing Toolbar image.
72
+  collapsingToolBarImage: require('../../img/topbar.jpg'), // Collapsing Toolbar image. Either use a url or require a local image.
73
+  collapsingToolBarCollapsedColor: '#0f2362', // Collapsing Toolbar scrim color.
69
 }
74
 }
70
 ```
75
 ```
71
 
76