Quellcode durchsuchen

replace container with component

- fix import statement
- add use case (stack)
Billy vor 6 Jahren
Ursprung
Commit
d05145d311
7 geänderte Dateien mit 100 neuen und 68 gelöschten Zeilen
  1. 1
    1
      docs/_sidebar.md
  2. 3
    3
      docs/docs/Component.md
  3. 32
    33
      docs/docs/Navigation.md
  4. 2
    2
      docs/docs/Root.md
  5. 2
    2
      docs/docs/SideMenu.md
  6. 42
    9
      docs/docs/usage.md
  7. 18
    18
      docs/docs/v1tov2diff.md

+ 1
- 1
docs/_sidebar.md Datei anzeigen

@@ -6,7 +6,7 @@
6 6
  - [Top Level](/docs/Navigation)
7 7
 - Params
8 8
  - [Root](/docs/Root)
9
- - [Container](/docs/Container)
9
+ - [Component](/docs/Component)
10 10
  - [SideMenu](/docs/SideMenu)
11 11
 - Options
12 12
  - [NavigationOptions](/docs/options/NavigationOptions)

docs/docs/Container.md → docs/docs/Component.md Datei anzeigen

@@ -1,11 +1,11 @@
1
-<h1>Container</h1>
1
+<h1>Component</h1>
2 2
 
3 3
 **Properties**
4 4
 
5 5
 | Name | Type | Description |
6 6
 | --- | --- | --- |
7
-| name | <code>string</code> | The container's registered name |
8
-| topTabs | [<code>Array.&lt;Container&gt;</code>](#Container) |  |
7
+| name | <code>string</code> | The components registered name |
8
+| topTabs | [<code>Array.&lt;Component&gt;</code>](#Component) |  |
9 9
 | passProps | <code>object</code> | props |
10 10
 | options | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Options">Options</a> |  |
11 11
 

+ 32
- 33
docs/docs/Navigation.md Datei anzeigen

@@ -3,32 +3,32 @@
3 3
 # Navigation
4 4
 
5 5
 * [Navigation](#Navigation)
6
-    * [.registerContainer(containerName, getContainerFunc)](#Navigation+registerContainer)
6
+    * [.registerComponent(componentName, getComponentFunc)](#Navigation+registerComponent)
7 7
     * [.setRoot(root)](#Navigation+setRoot)
8 8
     * [.setDefaultOptions(options)](#Navigation+setDefaultOptions)
9
-    * [.setOptions(containerId, options)](#Navigation+setOptions)
9
+    * [.setOptions(componentId, options)](#Navigation+setOptions)
10 10
     * [.showModal(params)](#Navigation+showModal)
11
-    * [.dismissModal(containerId)](#Navigation+dismissModal)
11
+    * [.dismissModal(componentId)](#Navigation+dismissModal)
12 12
     * [.dismissAllModals()](#Navigation+dismissAllModals)
13
-    * [.push(containerId, container)](#Navigation+push)
14
-    * [.pop(containerId, params)](#Navigation+pop)
15
-    * [.popTo(containerId)](#Navigation+popTo)
16
-    * [.popToRoot(containerId)](#Navigation+popToRoot)
13
+    * [.push(componentId, component)](#Navigation+push)
14
+    * [.pop(componentId, params)](#Navigation+pop)
15
+    * [.popTo(componentId)](#Navigation+popTo)
16
+    * [.popToRoot(componentId)](#Navigation+popToRoot)
17 17
     * [.events()](#Navigation+events)
18 18
 
19 19
 
20 20
 * * *
21 21
 
22
-<a name="Navigation+registerContainer"></a>
22
+<a name="Navigation+registerComponent"></a>
23 23
 
24
-## navigation.registerContainer(containerName, getContainerFunc)
24
+## navigation.registerComponent(componentName, getComponentFunc)
25 25
 Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component.
26 26
 
27 27
 
28 28
 | Param | Type | Description |
29 29
 | --- | --- | --- |
30
-| containerName | <code>string</code> | Unique container name |
31
-| getContainerFunc | <code>function</code> | generator function, typically `() => require('./myContainer')` |
30
+| componentName | <code>string</code> | Unique component name |
31
+| getComponentFunc | <code>function</code> | generator function, typically `() => require('./myComponent')` |
32 32
 
33 33
 
34 34
 * * *
@@ -41,7 +41,7 @@ Reset the navigation stack to a new screen (the stack root is changed).
41 41
 
42 42
 | Param | Type |
43 43
 | --- | --- |
44
-| root | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Root">Root</a> | 
44
+| root | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Root">Root</a> |
45 45
 
46 46
 
47 47
 * * *
@@ -54,20 +54,20 @@ Set default options to all screens. Useful for declaring a consistent style acro
54 54
 
55 55
 | Param | Type |
56 56
 | --- | --- |
57
-| options | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/NavigationOptions">NavigationOptions</a> | 
57
+| options | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/NavigationOptions">NavigationOptions</a> |
58 58
 
59 59
 
60 60
 * * *
61 61
 
62 62
 <a name="Navigation+setOptions"></a>
63 63
 
64
-## navigation.setOptions(containerId, options)
65
-Change a containers navigation options
64
+## navigation.setOptions(componentId, options)
65
+Change a components navigation options
66 66
 
67 67
 
68 68
 | Param | Type | Description |
69 69
 | --- | --- | --- |
70
-| containerId | <code>string</code> | The container's id. |
70
+| componentId | <code>string</code> | The component's id. |
71 71
 | options | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/NavigationOptions">NavigationOptions</a> |  |
72 72
 
73 73
 
@@ -81,20 +81,20 @@ Show a screen as a modal.
81 81
 
82 82
 | Param | Type |
83 83
 | --- | --- |
84
-| params | <code>object</code> | 
84
+| params | <code>object</code> |
85 85
 
86 86
 
87 87
 * * *
88 88
 
89 89
 <a name="Navigation+dismissModal"></a>
90 90
 
91
-## navigation.dismissModal(containerId)
92
-Dismiss a modal by containerId. The dismissed modal can be anywhere in the stack.
91
+## navigation.dismissModal(componentId)
92
+Dismiss a modal by componentId. The dismissed modal can be anywhere in the stack.
93 93
 
94 94
 
95 95
 | Param | Type | Description |
96 96
 | --- | --- | --- |
97
-| containerId | <code>string</code> | The container's id. |
97
+| componentId | <code>string</code> | The component's id. |
98 98
 
99 99
 
100 100
 * * *
@@ -109,27 +109,27 @@ Dismiss all Modals
109 109
 
110 110
 <a name="Navigation+push"></a>
111 111
 
112
-## navigation.push(containerId, container)
112
+## navigation.push(componentId, component)
113 113
 Push a new screen into this screen's navigation stack.
114 114
 
115 115
 
116 116
 | Param | Type | Description |
117 117
 | --- | --- | --- |
118
-| containerId | <code>string</code> | The container's id. |
119
-| container | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Container">Container</a> |  |
118
+| componentId | <code>string</code> | The component's id. |
119
+| component | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Component">Component</a> |  |
120 120
 
121 121
 
122 122
 * * *
123 123
 
124 124
 <a name="Navigation+pop"></a>
125 125
 
126
-## navigation.pop(containerId, params)
127
-Pop a container from the stack, regardless of it's position.
126
+## navigation.pop(componentId, params)
127
+Pop a component from the stack, regardless of it's position.
128 128
 
129 129
 
130 130
 | Param | Type | Description |
131 131
 | --- | --- | --- |
132
-| containerId | <code>string</code> | The container's id. |
132
+| componentId | <code>string</code> | The component's id. |
133 133
 | params | <code>*</code> |  |
134 134
 
135 135
 
@@ -137,26 +137,26 @@ Pop a container from the stack, regardless of it's position.
137 137
 
138 138
 <a name="Navigation+popTo"></a>
139 139
 
140
-## navigation.popTo(containerId)
141
-Pop the stack to a given container
140
+## navigation.popTo(componentId)
141
+Pop the stack to a given component
142 142
 
143 143
 
144 144
 | Param | Type | Description |
145 145
 | --- | --- | --- |
146
-| containerId | <code>string</code> | The container's id. |
146
+| componentId | <code>string</code> | The component's id. |
147 147
 
148 148
 
149 149
 * * *
150 150
 
151 151
 <a name="Navigation+popToRoot"></a>
152 152
 
153
-## navigation.popToRoot(containerId)
154
-Pop the container's stack to root.
153
+## navigation.popToRoot(componentId)
154
+Pop the component's stack to root.
155 155
 
156 156
 
157 157
 | Param | Type |
158 158
 | --- | --- |
159
-| containerId | <code>*</code> | 
159
+| componentId | <code>*</code> |
160 160
 
161 161
 
162 162
 * * *
@@ -165,4 +165,3 @@ Pop the container's stack to root.
165 165
 
166 166
 ## navigation.events()
167 167
 Obtain the events registery instance
168
-

+ 2
- 2
docs/docs/Root.md Datei anzeigen

@@ -4,7 +4,7 @@
4 4
 
5 5
 | Name | Type |
6 6
 | --- | --- |
7
-| container | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Container">Container</a> | 
7
+| component | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Component">Component</a> | 
8 8
 | sideMenu | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/SideMenu">SideMenu</a> | 
9
-| bottomTabs | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Container">Container[]</a> | 
9
+| bottomTabs | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Component">Component[]</a> | 
10 10
 

+ 2
- 2
docs/docs/SideMenu.md Datei anzeigen

@@ -4,6 +4,6 @@
4 4
 
5 5
 | Name | Type |
6 6
 | --- | --- |
7
-| left | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Container">Container</a> | 
8
-| right | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Container">Container</a> | 
7
+| left | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Component">Component</a> | 
8
+| right | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Component">Component</a> | 
9 9
 

+ 42
- 9
docs/docs/usage.md Datei anzeigen

@@ -4,7 +4,7 @@
4 4
 
5 5
 ### Navigation
6 6
 ```js
7
-import Navigation from 'react-native-navigation';
7
+import { Navigation } from 'react-native-navigation';
8 8
 ```
9 9
 ### Events - On App Launched
10 10
 How to initiate your app.
@@ -83,24 +83,57 @@ Navigation.setRoot({
83 83
   },
84 84
 });
85 85
 ```
86
+
87
+Start a stack based app (with options):
88
+
89
+```js
90
+Navigation.setRoot({
91
+  stack: {
92
+    options: {
93
+      topBar: {
94
+        hidden: true,
95
+      },
96
+    },
97
+    children: [
98
+      {
99
+        component: {
100
+          name: 'navigation.playground.TextScreen',
101
+          passProps: {
102
+            text: 'This is tab 1',
103
+            myFunction: () => 'Hello from a function!',
104
+          },
105
+        },
106
+      },
107
+      {
108
+        component: {
109
+          name: 'navigation.playground.TextScreen',
110
+          passProps: {
111
+            text: 'This is tab 2',
112
+          },
113
+        },
114
+      },
115
+    ],
116
+  },
117
+});
118
+```
86 119
 ## Screen API
87 120
 
88 121
 ### push(params)
89 122
 Push a new screen into this screen's navigation stack.
90 123
 
91 124
 ```js
92
-Navigation.push(this.props.containerId, {
125
+Navigation.push(this.props.componentId, {
93 126
   name: 'navigation.playground.PushedScreen',
94 127
   passProps: {}
95 128
 });
96 129
 ```
97
-### pop(containerId)
130
+### pop(componentId)
98 131
 Pop the top screen from this screen's navigation stack.
99 132
 
100 133
 ```js
101
-Navigation.pop(this.props.containerId);
134
+Navigation.pop(this.props.componentId);
102 135
 ```
103
-### popTo(containerId)
136
+### popTo(componentId)
104 137
 ```js
105 138
 Navigation.popTo(previousScreenId);
106 139
 ```
@@ -108,14 +141,14 @@ Navigation.popTo(previousScreenId);
108 141
 Pop all the screens until the root from this screen's navigation stack
109 142
 
110 143
 ```js
111
-Navigation.popToRoot(this.props.containerId);
144
+Navigation.popToRoot(this.props.componentId);
112 145
 ```
113 146
 ### showModal(params = {})
114 147
 Show a screen as a modal.
115 148
 
116 149
 ```js
117 150
 Navigation.showModal({
118
-  container: {
151
+  component: {
119 152
     name: 'navigation.playground.ModalScreen',
120 153
     passProps: {
121 154
         key: 'value'
@@ -123,11 +156,11 @@ Navigation.showModal({
123 156
   }
124 157
 });
125 158
 ```
126
-### dismissModal(containerId)
159
+### dismissModal(componentId)
127 160
 Dismiss modal.
128 161
 
129 162
 ```js
130
-Navigation.dismissModal(this.props.containerId);
163
+Navigation.dismissModal(this.props.componentId);
131 164
 ```
132 165
 ### dismissAllModals()
133 166
 Dismiss all the current modals at the same time.

+ 18
- 18
docs/docs/v1tov2diff.md Datei anzeigen

@@ -17,9 +17,9 @@ These issues originate from the same problem: you cannot specify on which screen
17 17
 There are ways to solve some of these problems in v1 but they are not straightforward. We want to change that.
18 18
 
19 19
 #### New API
20
-To solve this problem in v2, every screen receives as a prop it’s containerId. Whenever you want to perform an action from that screen you need to pass the containerId to the function:
20
+To solve this problem in v2, every screen receives as a prop it’s componentId. Whenever you want to perform an action from that screen you need to pass the componentId to the function:
21 21
 ```js
22
-Navigator.pop(this.props.containerId)
22
+Navigator.pop(this.props.componentId)
23 23
 ```
24 24
 ### Built for Contributors
25 25
 Currently, it requires a lot of work to accept pull requests. We need to manually make sure that everything works before we approve them because v1 is not thoroughly tested. <br>
@@ -179,18 +179,18 @@ How to initiate your app.
179 179
 ```js
180 180
 Navigation.events().onAppLaunched(() => {
181 181
     Navigation.setRoot({
182
-      container: {
182
+      component: {
183 183
         name: 'navigation.playground.WelcomeScreen'
184 184
       }
185 185
     });
186 186
   });
187 187
 ```
188 188
 
189
-#### registerContainer(screenID, generator)
189
+#### registerComponent(screenID, generator)
190 190
 Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component.
191 191
 
192 192
 ```js
193
-Navigation.registerContainer(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
193
+Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
194 194
 ```
195 195
 
196 196
 #### setRoot({params})
@@ -198,12 +198,12 @@ Start a Single page app with two side menus:
198 198
 
199 199
 ```js
200 200
 Navigation.setRoot({
201
-      container: {
201
+      component: {
202 202
         name: 'navigation.playground.WelcomeScreen'
203 203
       },
204 204
       sideMenu: {
205 205
         left: {
206
-          container: {
206
+          component: {
207 207
             name: 'navigation.playground.TextScreen',
208 208
             passProps: {
209 209
               text: 'This is a left side menu screen'
@@ -211,7 +211,7 @@ Navigation.setRoot({
211 211
           }
212 212
         },
213 213
         right: {
214
-          container: {
214
+          component: {
215 215
             name: 'navigation.playground.TextScreen',
216 216
             passProps: {
217 217
               text: 'This is a right side menu screen'
@@ -227,7 +227,7 @@ Start a tab based app:
227 227
 Navigation.setRoot({
228 228
       tabs: [
229 229
         {
230
-          container: {
230
+          component: {
231 231
             name: 'navigation.playground.TextScreen',
232 232
             passProps: {
233 233
               text: 'This is tab 1',
@@ -236,7 +236,7 @@ Navigation.setRoot({
236 236
           }
237 237
         },
238 238
         {
239
-          container: {
239
+          component: {
240 240
             name: 'navigation.playground.TextScreen',
241 241
             passProps: {
242 242
               text: 'This is tab 2'
@@ -252,34 +252,34 @@ Navigation.setRoot({
252 252
 Push a new screen into this screen's navigation stack.
253 253
 
254 254
 ```js
255
-Navigation.push(this.props.containerId, {
255
+Navigation.push(this.props.componentId, {
256 256
       name: 'navigation.playground.PushedScreen',
257 257
       passProps: {}
258 258
     });
259 259
 ```
260
-#### pop(containerId)
260
+#### pop(componentId)
261 261
 Pop the top screen from this screen's navigation stack.
262 262
 
263 263
 ```js
264
-Navigation.pop(this.props.containerId);
264
+Navigation.pop(this.props.componentId);
265 265
 ```
266 266
 #### popTo(params)
267 267
 
268 268
 ```js
269
-Navigation.popTo(this.props.containerId, this.props.previousScreenIds[0]);
269
+Navigation.popTo(this.props.componentId, this.props.previousScreenIds[0]);
270 270
 ```
271 271
 #### popToRoot()
272 272
 Pop all the screens until the root from this screen's navigation stack
273 273
 
274 274
 ```js
275
-Navigation.popToRoot(this.props.containerId);
275
+Navigation.popToRoot(this.props.componentId);
276 276
 ```
277 277
 #### showModal(params = {})
278 278
 Show a screen as a modal.
279 279
 
280 280
 ```js
281 281
 Navigation.showModal({
282
-      container: {
282
+      component: {
283 283
         name: 'navigation.playground.ModalScreen',
284 284
         passProps: {
285 285
             key: 'value'
@@ -287,11 +287,11 @@ Navigation.showModal({
287 287
       }
288 288
     });
289 289
 ```
290
-#### dismissModal(containerId)
290
+#### dismissModal(componentId)
291 291
 Dismiss modal.
292 292
 
293 293
 ```js
294
-Navigation.dismissModal(this.props.containerId);
294
+Navigation.dismissModal(this.props.componentId);
295 295
 ```
296 296
 #### dismissAllModals()
297 297
 Dismiss all the current modals at the same time.