react-native-navigation的迁移库

api-root.mdx 2.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. ---
  2. id: root
  3. title: Root
  4. sidebar_label: Root
  5. ---
  6. import Tabs from '@theme/Tabs';
  7. import TabItem from '@theme/TabItem';
  8. ## `setRoot()`
  9. Used to set the UI of the application. Read more about the root hierarchy level in the [docs section](../docs/root).
  10. #### Parameters
  11. | Name | Required | Type | Description |
  12. | ------ | -------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------- |
  13. | layout | Yes | [Layout](layout-layout.mdx) | Any type of layout. [BottomTabs](layout-BottomTabs.mdx), [Stack](layout-stack.mdx), [SideMenu](layout-sideMenu.mdx), [Component](layout-component.mdx) |
  14. #### Example
  15. <Tabs
  16. defaultValue='stack'
  17. values={[
  18. { label: 'With Stack layout', value: 'stack' },
  19. { label: 'With BottomTabs layout', value: 'bottomTabs' }
  20. ]
  21. }>
  22. <TabItem value='stack'>
  23. ```js
  24. Navigation.setRoot({
  25. root: {
  26. stack: {
  27. children: [{
  28. component: {
  29. name: 'example.FirstTabScreen',
  30. passProps: {
  31. text: 'This is tab 1'
  32. }
  33. }
  34. }],
  35. options: {
  36. bottomTab: {
  37. text: 'Tab 1',
  38. icon: require('../images/one.png'),
  39. testID: 'FIRST_TAB_BAR_BUTTON'
  40. }
  41. }
  42. }
  43. }
  44. });
  45. ```
  46. </TabItem>
  47. <TabItem value='bottomTabs'>
  48. ```js
  49. Navigation.setRoot({
  50. root: {
  51. bottomTabs: {
  52. children: [{
  53. stack: {
  54. children: [{
  55. component: {
  56. name: 'example.FirstTabScreen',
  57. passProps: {
  58. text: 'This is tab 1'
  59. }
  60. }
  61. }],
  62. options: {
  63. bottomTab: {
  64. text: 'Tab 1',
  65. icon: require('../images/one.png'),
  66. testID: 'FIRST_TAB_BAR_BUTTON'
  67. }
  68. }
  69. }
  70. },
  71. {
  72. component: {
  73. name: 'navigation.playground.TextScreen',
  74. passProps: {
  75. text: 'This is tab 2'
  76. },
  77. options: {
  78. bottomTab: {
  79. text: 'Tab 2',
  80. icon: require('../images/two.png'),
  81. testID: 'SECOND_TAB_BAR_BUTTON'
  82. }
  83. }
  84. }
  85. }]
  86. }
  87. }
  88. });
  89. ```
  90. </TabItem>
  91. </Tabs>