react-native-navigation的迁移库

docs-bottomTabs.mdx 4.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. ---
  2. id: bottomTabs
  3. title: Bottom tabs
  4. sidebar_label: Bottom tabs
  5. ---
  6. import useBaseUrl from '@docusaurus/useBaseUrl';
  7. Bottom tabs refers to a row of links, displayed at the bottom of the screen, and is referred to as "Tab Bar" in iOS and as "Bottom Navigation Bar" on Android. Usually these are intended to be used to switch between top-level content views with a single tap.
  8. ## Creating bottom tabs
  9. BottomTabs provide flat navigation and access to up to five equally important top-level root destinations. While any type of layout can be displayed in a tab, typically, [Stacks]() are used, since they allow for vertical navigation within a tab.
  10. ### Example
  11. Lets see how to create a simple BottomTabs layout. There are a few things to notice here:
  12. 1. Each child represents a tab on the screen.
  13. 2. The root layout for each tab is a stack to allow for vertical navigation within the tab.
  14. 3. Each stack declares `bottomTab` options which are used to configure the tab's text, icon, color etc.
  15. ```js
  16. bottomTabs: {
  17. id: 'BOTTOM_TABS_LAYOUT',
  18. children: [
  19. {
  20. stack: {
  21. id: 'HOME_TAB',
  22. children: [
  23. {
  24. component: {
  25. id: 'HOME_SCREEN'
  26. name: 'HomeScreen'
  27. }
  28. }
  29. ],
  30. options: {
  31. bottomTab: {
  32. icon: require('./home.png')
  33. }
  34. }
  35. }
  36. },
  37. {
  38. stack: {
  39. id: 'PROFILE_TAB',
  40. children: [
  41. {
  42. component: {
  43. id: 'PROFILE_SCREEN',
  44. name: 'ProfileScreen'
  45. }
  46. }
  47. ],
  48. options: {
  49. bottomTab: {
  50. icon: require('./profile.png')
  51. }
  52. }
  53. }
  54. }
  55. ]
  56. }
  57. ```
  58. Once we run this code, our BottomTabs should look like this:
  59. <img width="40%" src={useBaseUrl('img/bottomTabs.png')} />
  60. ## Selecting Tabs Programmatically
  61. Tabs can be selected programmatically by updating the `currentTabIndex` or `currentTabId` options.
  62. We'll use the BottomTabs layout showcased [above](bottomTabs-docs#example) to demonstrate programmatic tab selection.
  63. ### Selecting a tab by index
  64. The following mergeOptions command will select the second tab. We're passing the id of our BottomTabs layout, but we could also use the id of any of the child components, for example `PROFILE_TAB` or `PROFILE_SCREEN`.
  65. ```js
  66. Navigation.mergeOptions('BOTTOM_TABS_LAYOUT', {
  67. bottomTabs: {
  68. currentTabIndex: 1
  69. }
  70. });
  71. ```
  72. ### Selecting a tab by id
  73. Tabs can also be selected by id (`componentId`). This is particularly useful in cases where you don't know in which tab a screen is contained.
  74. For example, if invoked from one of the child components, `HOME_SCREEN` or `SETTINGS_SCREEN`, the following merge command will select the tab containing the child.
  75. ```js
  76. Navigation.mergeOptions(this.props.componentId, {
  77. bottomTabs: {
  78. currentTabId: this.props.componentId
  79. }
  80. });
  81. ```
  82. ## Changing BottomTabs visibility
  83. The `visible` property is used to control the BottomTab visibility. Visibility can be toggled dynamically using the `mergeOptions` command.
  84. ```js
  85. Navigation.mergeOptions(componentId, {
  86. bottomTabs: {
  87. visible: false
  88. },
  89. });
  90. ```
  91. Visibility can also be changed when pushing screens.
  92. ```js
  93. Navigation.push(componentId, {
  94. component: {
  95. name: 'pushedScreen',
  96. options: {
  97. bottomTabs: {
  98. visible: false
  99. }
  100. }
  101. }
  102. });
  103. ```
  104. ## Updating tab options dynamically
  105. To update a tab option, like an icon, text or color, simply call `mergeOptions` with new options using the id of a component or layout contained in the tab you wish to update.
  106. For instance, in the example below we update the color of a specific tab:
  107. ```js
  108. Navigation.mergeOptions(componentId, {
  109. bottomTab: {
  110. iconColor: 'red',
  111. textColor: 'red'
  112. },
  113. });
  114. ```
  115. ## Controlling tab loading
  116. By default, all tabs are mounted at the same time. This can have a negative impact on performance since screens which are not visible to the user are mounted.
  117. The order in which tabs are mounted can be configured with the `tabsAttachMode` option:
  118. * `together` - all tabs are mounted at the same time, this is the default behavior.
  119. * `afterInitialTab` - after initial tab is mounted, other tabs are mounted.
  120. * `onSwitchToTab` - initial tab is mounted, other tabs are mounted when the user navigates to them for the first time.