react-native-navigation的迁移库

style-statusbar.mdx 1.5KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. ---
  2. id: style-statusBar
  3. title: StatusBar
  4. sidebar_label: StatusBar
  5. ---
  6. The StatusBar appearance is controlled through options.
  7. For example, the following options will change the StatusBar background color to white will use dark colors for the StatusBar content (time, battery information, notification icons etc)
  8. ```js
  9. options: {
  10. statusBar: {
  11. backgroundColor: 'white',
  12. style: 'dark'
  13. }
  14. }
  15. ```
  16. :::warning Compatibility with StatusBar component
  17. React native's [StatusBar](https://reactnative.dev/docs/statusbar#__docusaurus) component is incompatible with React Native Navigation and you should avoid using it.
  18. :::
  19. ## Changing StatusBar style dynamically
  20. As the StatusBar is controlled through options, it can be configured dynamically by calling `Navigation.mergeOptions` with the desired StatusBar options.
  21. For example, here's how you would hide the StatusBar dynamically
  22. ```js
  23. Navigation.mergeOptions(this.props.componentId, {
  24. statusBar: {
  25. visible: false
  26. }
  27. });
  28. ```
  29. ## How keep current StatusBar color when displaying screens
  30. When screens are displayed, the StatusBar color always changes to the color associated with the current screen. If a color isn't specified for a given screen (and thus for the StatusBar), the default (System default or from defaultOptions) color is used. Sometimes you might want to keep the current StatusBar color, for example when displaying an alert or a toast. To keep StatusBar color unchanged when displaying a screen, use `null` as a StatusBar color.
  31. ```js
  32. options: {
  33. statusBar: {
  34. backgroundColor: null
  35. }
  36. }
  37. ```