react-native-navigation的迁移库

style-orientation.mdx 1.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. ---
  2. id: style-orientation
  3. title: Orientation
  4. sidebar_label: Orientation
  5. ---
  6. import Tabs from '@theme/Tabs';
  7. import TabItem from '@theme/TabItem';
  8. ## Locking orientation
  9. Orientation can be locked either in the layout level, or across the app via default options. You can declare orientations you'd like your app to support in default options.
  10. <Tabs
  11. defaultValue="defaultOptions"
  12. values={[
  13. { label: 'Locking orientation in default options', value: 'defaultOptions', },
  14. { label: 'Locking root layout orientation', value: 'root', },
  15. { label: 'Showing landscape modal', value: 'modal', }
  16. ]
  17. }>
  18. <TabItem value="defaultOptions">
  19. Setting orientation in default options will affect all screens in all hierarchy levels. It's still possible to override orientation for specific screens.
  20. ```js
  21. Navigation.setDefaultOptions({
  22. layout: {
  23. orientation: ['portrait']
  24. }
  25. });
  26. ```
  27. </TabItem>
  28. <TabItem value="modal">
  29. The following example demonstrates how to show a modal in landscape orientation.
  30. ```js
  31. Navigation.showModal({
  32. component: {
  33. name: 'VideoPlayer'
  34. options: {
  35. layout: {
  36. orientation: ['landscape']
  37. }
  38. }
  39. }
  40. });
  41. ```
  42. </TabItem>
  43. <TabItem value="root">
  44. Applying orientation in the root level will affect all screens in the root hierarchy level. It **will not** apply to modals.
  45. ```js
  46. Navigation.setRoot({
  47. root: {
  48. bottomTabs: {
  49. options: {
  50. layout: {
  51. orientation: ['portrait']
  52. }
  53. },
  54. children: [
  55. ...
  56. ]
  57. }
  58. }
  59. });
  60. ```
  61. </TabItem>
  62. </Tabs>
  63. ## Changing orientation dynamically
  64. Changing orientation dynamically through `Navigation.mergeOption()` is supported only on Android.
  65. ```js
  66. Navigation.mergeOptions(this.props.componentId, {
  67. layout: {
  68. orientation: ['landscape']
  69. }
  70. });
  71. ```