Ver código fonte

Document programmatic tab selection

Guy Carmeli 6 anos atrás
pai
commit
ec108ed3ad
2 arquivos alterados com 59 adições e 6 exclusões
  1. 1
    1
      docs/_sidebar.md
  2. 58
    5
      docs/docs/layout-types.md

+ 1
- 1
docs/_sidebar.md Ver arquivo

@@ -7,7 +7,7 @@
7 7
   - [Top Level](/docs/top-level-api)
8 8
   - [Screen](/docs/screen-api)
9 9
   - [Events](/docs/events)
10
-  - [Layout Types](/docs/layout-types)
10
+  - [Layouts](/docs/layout-types)
11 11
   - [Styling](/docs/styling)
12 12
   - [TopBar Buttons](/docs/topBar-buttons) 
13 13
   - [Animations](/docs/animations)

+ 58
- 5
docs/docs/layout-types.md Ver arquivo

@@ -1,4 +1,4 @@
1
-# Layout Types
1
+# Layouts
2 2
 
3 3
 The possibilities of the RNN layout API are wide open in terms of what you can construct with it: stacks, tabs and drawers in many combinations.
4 4
 
@@ -70,6 +70,59 @@ const bottomTabs = {
70 70
 }
71 71
 ```
72 72
 
73
+### Selecting tabs programmatically
74
+
75
+The selected index is a style property which can be updated using the `mergeOptions` command. In order to update the BottomTabs options, Pass the BottomTabs `componentId` or the `componentId` of one of its children.
76
+
77
+?>We'll use the following BottomTabs layout to demonstrate programmatic tab selection.
78
+
79
+```js
80
+const bottomTabs = {
81
+  id: 'BottomTabsId',
82
+  children: [
83
+    {
84
+      component: {
85
+        name: 'FirstScreen',
86
+        options: { ... }
87
+      }
88
+    },
89
+    {
90
+      component: {
91
+        id: 'SecondScreenId',
92
+        name: 'SecondScreen',
93
+        options: { ... }
94
+      }
95
+    }
96
+  ]
97
+}
98
+```
99
+
100
+#### selecting a tab by index
101
+
102
+The following `mergeOptions` command will select the second tab. We're passing the id of our BottomTabs, but we could also use the id of any of the child components, for example `SecondScreenId`.
103
+
104
+```js
105
+Navigation.mergeOptions('BottomTabsId', {
106
+  bottomTabs: {
107
+    currentTabIndex: 1
108
+  }
109
+});
110
+```
111
+
112
+#### selecting a tab by componentId
113
+
114
+Tabs can also be selected by componentId. This is particularly useful in cases where you don't know in which tab a screen is contained.
115
+
116
+For example, if invoked from one of the child components;`SecondScreen` or `FirstScreen`, the following merge command will select the tab containing the child.
117
+
118
+```js
119
+Navigation.mergeOptions(this.props.componentId, {
120
+  bottomTabs: {
121
+    currentTabId: this.props.componentId
122
+  }
123
+});
124
+```
125
+
73 126
 ## sideMenu
74 127
 
75 128
 Expect center, left and right layouts
@@ -112,9 +165,9 @@ const splitView = {
112 165
 }
113 166
 ```
114 167
 
115
-# Layout Examples
168
+## Layout Examples
116 169
 
117
-## Single page app with two side menus:
170
+### Single page app with two side menus:
118 171
 
119 172
 ```js
120 173
 Navigation.setRoot({
@@ -146,7 +199,7 @@ Navigation.setRoot({
146 199
 });
147 200
 ```
148 201
 
149
-## Tab based app (with passProps example):
202
+### Tab based app (with passProps example):
150 203
 
151 204
 ```js
152 205
 Navigation.setRoot({
@@ -176,7 +229,7 @@ Navigation.setRoot({
176 229
 });
177 230
 ```
178 231
 
179
-## Stack based app (with options example, initialised with 2 screens):
232
+### Stack based app (with options example, initialised with 2 screens):
180 233
 
181 234
 ```js
182 235
 Navigation.setRoot({