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,10 +24,9 @@ export default class StyledScreen extends Component {
24 24
 
25 25
 ```js
26 26
 {
27
-  navigationBarColor: '#000000', // change the background color of the bottom native navigation bar. Android only
27
+  // Common
28 28
   navBarTextColor: '#000000', // change the text color of the title (remembered across pushes)
29 29
   navBarTextFontFamily: 'font-name', // Changes the title font
30
-  navBarTitleTextCentered: true, // Android only. centers the title, default false.
31 30
   navBarBackgroundColor: '#f7f7f7', // change the background color of the nav bar (remembered across pushes)
32 31
 
33 32
   navBarButtonColor: '#007aff', // Change color of nav bar buttons (eg. the back button) (remembered across pushes)
@@ -46,26 +45,32 @@ export default class StyledScreen extends Component {
46 45
   navBarHideOnScroll: false, // make the nav bar hidden only after the user starts to scroll
47 46
   navBarTranslucent: false, // make the nav bar semi-translucent, works best with drawUnderNavBar:true
48 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 48
   navBarNoBorder: false, // hide the navigation bar bottom border (hair line). Default false
51 49
   drawUnderNavBar: false, // draw the screen content under the nav bar, works best with navBarTranslucent:true
52 50
   drawUnderTabBar: false, // draw the screen content under the tab bar (the tab bar is always translucent)
53 51
   statusBarBlur: false, // blur the area under the status bar, works best with navBarHidden:true
54 52
   navBarBlur: false, // blur the entire nav bar, works best with drawUnderNavBar:true
55 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 54
   statusBarHideWithNavBar: false // hide the status bar if the nav bar is also hidden, useful for navBarHidden:true
58 55
   statusBarHidden: false, // make the status bar hidden regardless of nav bar state
59 56
   statusBarTextColorScheme: 'dark', // text color of status bar, 'dark' / 'light' (remembered across pushes)
60 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 58
   navBarSubtitleColor: 'red', // subtitle color
65 59
   screenBackgroundColor: 'white', // Default screen color, visible before the actual react view is rendered
66 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