react-native-navigation的迁移库

1234567891011121314151617181920212223242526272829303132333435363738
  1. ---
  2. id: style-theme
  3. title: Themes
  4. sidebar_label: Themes
  5. ---
  6. A theme is a type of style which is applied to the entire app. It allows you to declare
  7. a consistent style to all Navigation components such as the TopBar and BottomTabs and also
  8. to system elements like the StatusBar and NavigationBar.
  9. ## Applying a theme
  10. Themes are applied using `Navigation.setDefaultOptions()` which must be called **before** `Navigation.setRoot()` is called.
  11. ```js
  12. // Set the default topBar background color to red
  13. Navigation.setDefaultOptions({
  14. topBar: {
  15. background: {
  16. color: 'red'
  17. }
  18. }
  19. });
  20. // That stack's topBar background color will be red, as is set in default options
  21. Navigation.setRoot({
  22. root: {
  23. stack: {
  24. children: [
  25. ...
  26. ]
  27. }
  28. }
  29. });
  30. ```
  31. ## Changing theme dynamically
  32. Apps can have multiple themes and sometimes you might need to change theme dynamically. To change current theme, simply call `Navigation.setDefaultOptions()` with updated theme options, following that with a call to `Navigation.setRoot()`. The reason we need to setRoot once more is because `Navigation.setDefaultOptions()` does not apply options to screens which had already been created.