Преглед на файлове

replace container with component

- fix import statement
- add use case (stack)
Billy преди 6 години
родител
ревизия
d05145d311
променени са 7 файла, в които са добавени 100 реда и са изтрити 68 реда
  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 Целия файл

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

docs/docs/Container.md → docs/docs/Component.md Целия файл

1
-<h1>Container</h1>
1
+<h1>Component</h1>
2
 
2
 
3
 **Properties**
3
 **Properties**
4
 
4
 
5
 | Name | Type | Description |
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
 | passProps | <code>object</code> | props |
9
 | passProps | <code>object</code> | props |
10
 | options | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Options">Options</a> |  |
10
 | options | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Options">Options</a> |  |
11
 
11
 

+ 32
- 33
docs/docs/Navigation.md Целия файл

3
 # Navigation
3
 # Navigation
4
 
4
 
5
 * [Navigation](#Navigation)
5
 * [Navigation](#Navigation)
6
-    * [.registerContainer(containerName, getContainerFunc)](#Navigation+registerContainer)
6
+    * [.registerComponent(componentName, getComponentFunc)](#Navigation+registerComponent)
7
     * [.setRoot(root)](#Navigation+setRoot)
7
     * [.setRoot(root)](#Navigation+setRoot)
8
     * [.setDefaultOptions(options)](#Navigation+setDefaultOptions)
8
     * [.setDefaultOptions(options)](#Navigation+setDefaultOptions)
9
-    * [.setOptions(containerId, options)](#Navigation+setOptions)
9
+    * [.setOptions(componentId, options)](#Navigation+setOptions)
10
     * [.showModal(params)](#Navigation+showModal)
10
     * [.showModal(params)](#Navigation+showModal)
11
-    * [.dismissModal(containerId)](#Navigation+dismissModal)
11
+    * [.dismissModal(componentId)](#Navigation+dismissModal)
12
     * [.dismissAllModals()](#Navigation+dismissAllModals)
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
     * [.events()](#Navigation+events)
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
 Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component.
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
 | Param | Type | Description |
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
 
41
 
42
 | Param | Type |
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
 
54
 
55
 | Param | Type |
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
 <a name="Navigation+setOptions"></a>
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
 | Param | Type | Description |
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
 | options | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/NavigationOptions">NavigationOptions</a> |  |
71
 | options | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/NavigationOptions">NavigationOptions</a> |  |
72
 
72
 
73
 
73
 
81
 
81
 
82
 | Param | Type |
82
 | Param | Type |
83
 | --- | --- |
83
 | --- | --- |
84
-| params | <code>object</code> | 
84
+| params | <code>object</code> |
85
 
85
 
86
 
86
 
87
 * * *
87
 * * *
88
 
88
 
89
 <a name="Navigation+dismissModal"></a>
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
 | Param | Type | Description |
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
 
109
 
110
 <a name="Navigation+push"></a>
110
 <a name="Navigation+push"></a>
111
 
111
 
112
-## navigation.push(containerId, container)
112
+## navigation.push(componentId, component)
113
 Push a new screen into this screen's navigation stack.
113
 Push a new screen into this screen's navigation stack.
114
 
114
 
115
 
115
 
116
 | Param | Type | Description |
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
 <a name="Navigation+pop"></a>
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
 | Param | Type | Description |
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
 | params | <code>*</code> |  |
133
 | params | <code>*</code> |  |
134
 
134
 
135
 
135
 
137
 
137
 
138
 <a name="Navigation+popTo"></a>
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
 | Param | Type | Description |
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
 <a name="Navigation+popToRoot"></a>
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
 | Param | Type |
157
 | Param | Type |
158
 | --- | --- |
158
 | --- | --- |
159
-| containerId | <code>*</code> | 
159
+| componentId | <code>*</code> |
160
 
160
 
161
 
161
 
162
 * * *
162
 * * *
165
 
165
 
166
 ## navigation.events()
166
 ## navigation.events()
167
 Obtain the events registery instance
167
 Obtain the events registery instance
168
-

+ 2
- 2
docs/docs/Root.md Целия файл

4
 
4
 
5
 | Name | Type |
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
 | sideMenu | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/SideMenu">SideMenu</a> | 
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 Целия файл

4
 
4
 
5
 | Name | Type |
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 Целия файл

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

+ 18
- 18
docs/docs/v1tov2diff.md Целия файл

17
 There are ways to solve some of these problems in v1 but they are not straightforward. We want to change that.
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
 #### New API
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
 ```js
21
 ```js
22
-Navigator.pop(this.props.containerId)
22
+Navigator.pop(this.props.componentId)
23
 ```
23
 ```
24
 ### Built for Contributors
24
 ### Built for Contributors
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>
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
 ```js
179
 ```js
180
 Navigation.events().onAppLaunched(() => {
180
 Navigation.events().onAppLaunched(() => {
181
     Navigation.setRoot({
181
     Navigation.setRoot({
182
-      container: {
182
+      component: {
183
         name: 'navigation.playground.WelcomeScreen'
183
         name: 'navigation.playground.WelcomeScreen'
184
       }
184
       }
185
     });
185
     });
186
   });
186
   });
187
 ```
187
 ```
188
 
188
 
189
-#### registerContainer(screenID, generator)
189
+#### registerComponent(screenID, generator)
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.
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
 ```js
192
 ```js
193
-Navigation.registerContainer(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
193
+Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
194
 ```
194
 ```
195
 
195
 
196
 #### setRoot({params})
196
 #### setRoot({params})
198
 
198
 
199
 ```js
199
 ```js
200
 Navigation.setRoot({
200
 Navigation.setRoot({
201
-      container: {
201
+      component: {
202
         name: 'navigation.playground.WelcomeScreen'
202
         name: 'navigation.playground.WelcomeScreen'
203
       },
203
       },
204
       sideMenu: {
204
       sideMenu: {
205
         left: {
205
         left: {
206
-          container: {
206
+          component: {
207
             name: 'navigation.playground.TextScreen',
207
             name: 'navigation.playground.TextScreen',
208
             passProps: {
208
             passProps: {
209
               text: 'This is a left side menu screen'
209
               text: 'This is a left side menu screen'
211
           }
211
           }
212
         },
212
         },
213
         right: {
213
         right: {
214
-          container: {
214
+          component: {
215
             name: 'navigation.playground.TextScreen',
215
             name: 'navigation.playground.TextScreen',
216
             passProps: {
216
             passProps: {
217
               text: 'This is a right side menu screen'
217
               text: 'This is a right side menu screen'
227
 Navigation.setRoot({
227
 Navigation.setRoot({
228
       tabs: [
228
       tabs: [
229
         {
229
         {
230
-          container: {
230
+          component: {
231
             name: 'navigation.playground.TextScreen',
231
             name: 'navigation.playground.TextScreen',
232
             passProps: {
232
             passProps: {
233
               text: 'This is tab 1',
233
               text: 'This is tab 1',
236
           }
236
           }
237
         },
237
         },
238
         {
238
         {
239
-          container: {
239
+          component: {
240
             name: 'navigation.playground.TextScreen',
240
             name: 'navigation.playground.TextScreen',
241
             passProps: {
241
             passProps: {
242
               text: 'This is tab 2'
242
               text: 'This is tab 2'
252
 Push a new screen into this screen's navigation stack.
252
 Push a new screen into this screen's navigation stack.
253
 
253
 
254
 ```js
254
 ```js
255
-Navigation.push(this.props.containerId, {
255
+Navigation.push(this.props.componentId, {
256
       name: 'navigation.playground.PushedScreen',
256
       name: 'navigation.playground.PushedScreen',
257
       passProps: {}
257
       passProps: {}
258
     });
258
     });
259
 ```
259
 ```
260
-#### pop(containerId)
260
+#### pop(componentId)
261
 Pop the top screen from this screen's navigation stack.
261
 Pop the top screen from this screen's navigation stack.
262
 
262
 
263
 ```js
263
 ```js
264
-Navigation.pop(this.props.containerId);
264
+Navigation.pop(this.props.componentId);
265
 ```
265
 ```
266
 #### popTo(params)
266
 #### popTo(params)
267
 
267
 
268
 ```js
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
 #### popToRoot()
271
 #### popToRoot()
272
 Pop all the screens until the root from this screen's navigation stack
272
 Pop all the screens until the root from this screen's navigation stack
273
 
273
 
274
 ```js
274
 ```js
275
-Navigation.popToRoot(this.props.containerId);
275
+Navigation.popToRoot(this.props.componentId);
276
 ```
276
 ```
277
 #### showModal(params = {})
277
 #### showModal(params = {})
278
 Show a screen as a modal.
278
 Show a screen as a modal.
279
 
279
 
280
 ```js
280
 ```js
281
 Navigation.showModal({
281
 Navigation.showModal({
282
-      container: {
282
+      component: {
283
         name: 'navigation.playground.ModalScreen',
283
         name: 'navigation.playground.ModalScreen',
284
         passProps: {
284
         passProps: {
285
             key: 'value'
285
             key: 'value'
287
       }
287
       }
288
     });
288
     });
289
 ```
289
 ```
290
-#### dismissModal(containerId)
290
+#### dismissModal(componentId)
291
 Dismiss modal.
291
 Dismiss modal.
292
 
292
 
293
 ```js
293
 ```js
294
-Navigation.dismissModal(this.props.containerId);
294
+Navigation.dismissModal(this.props.componentId);
295
 ```
295
 ```
296
 #### dismissAllModals()
296
 #### dismissAllModals()
297
 Dismiss all the current modals at the same time.
297
 Dismiss all the current modals at the same time.