Browse Source

Clean up docs a bit

Guy Carmeli 6 years ago
parent
commit
b984d00fb9
2 changed files with 119 additions and 157 deletions
  1. 0
    146
      docs/docs/Usage.md
  2. 119
    11
      docs/docs/layout-types.md

+ 0
- 146
docs/docs/Usage.md View File

1
-
2
 # Usage
1
 # Usage
3
 
2
 
4
 - If you don't like reading, just jump into the fully working [playground](https://github.com/wix/react-native-navigation/tree/v2/playground) project. All features are implemented there, and it's the basis for the e2e tests.
3
 - If you don't like reading, just jump into the fully working [playground](https://github.com/wix/react-native-navigation/tree/v2/playground) project. All features are implemented there, and it's the basis for the e2e tests.
38
 });
37
 });
39
 ```
38
 ```
40
 
39
 
41
-## Layout Examples
42
-
43
-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.
44
-
45
-You can compose arbitrary native layout hierarchies (although some weird edge cases may not be possible or produce errors). In such cases, open an issue so that we either fix it or warn in dev time.
46
-
47
-For all possible layout types see [API](/api/README).
48
-
49
-
50
-### Single page app with two side menus:
51
-
52
-```js
53
-Navigation.setRoot({
54
-  root: {
55
-    sideMenu: {
56
-      left: {
57
-        component: {
58
-          name: 'navigation.playground.TextScreen',
59
-          passProps: {
60
-            text: 'This is a left side menu screen'
61
-          }
62
-        }
63
-      },
64
-      center: {
65
-        component: {
66
-          name: 'navigation.playground.WelcomeScreen'
67
-        },
68
-      },
69
-      right: {
70
-        component: {
71
-          name: 'navigation.playground.TextScreen',
72
-          passProps: {
73
-            text: 'This is a right side menu screen'
74
-          }
75
-        }
76
-      }
77
-    }
78
-  }
79
-});
80
-```
81
-
82
-### Tab based app (with passProps example):
83
-
84
-```js
85
-Navigation.setRoot({
86
-  root: {
87
-    bottomTabs: {
88
-      children: [
89
-        {
90
-          component: {
91
-            name: 'navigation.playground.TextScreen',
92
-            passProps: {
93
-              text: 'This is tab 1',
94
-              myFunction: () => 'Hello from a function!',
95
-            },
96
-          },
97
-        },
98
-        {
99
-          component: {
100
-            name: 'navigation.playground.TextScreen',
101
-            passProps: {
102
-              text: 'This is tab 2',
103
-            },
104
-          },
105
-        },
106
-      ],
107
-    },
108
-  }
109
-});
110
-```
111
-
112
-### Stack based app (with options example, initialised with 2 screens):
113
-
114
-```js
115
-Navigation.setRoot({
116
-  root: {
117
-    stack: {
118
-      options: {
119
-        topBar: {
120
-          hidden: true,
121
-        },
122
-      },
123
-      children: [
124
-        {
125
-          component: {
126
-            name: 'navigation.playground.TextScreen',
127
-            passProps: {
128
-              text: 'This is tab 1',
129
-              myFunction: () => 'Hello from a function!',
130
-            },
131
-          },
132
-        },
133
-        {
134
-          component: {
135
-            name: 'navigation.playground.TextScreen',
136
-            passProps: {
137
-              text: 'This is tab 2',
138
-            },
139
-          },
140
-        },
141
-      ],
142
-    },
143
-  }
144
-});
145
-```
146
-
147
-## Navigating The Stack
148
-
149
-For all commands see [API](/api/README).
150
-
151
-### push
152
-Push a new instance of a screen (component) on top of `this` screen's navigation stack.
153
-
154
-```js
155
-Navigation.push(this.props.componentId, {
156
-  component: {
157
-    name: 'navigation.playground.PushedScreen'
158
-  }
159
-});
160
-```
161
-
162
-### pop
163
-Pop the top screen from `this` screen's navigation stack.
164
-
165
-```js
166
-Navigation.pop(this.props.componentId);
167
-```
168
-
169
-### showModal
170
-Show a screen as a modal. (Note: not part of the stack)
171
-
172
-```js
173
-Navigation.showModal({
174
-  component: {
175
-    name: 'navigation.playground.ModalScreen'
176
-  }
177
-});
178
-```
179
-### dismissModal
180
-Dismiss modal.
181
-
182
-```js
183
-Navigation.dismissModal(this.props.componentId);
184
-```
185
-
186
 ## Screen Lifecycle
40
 ## Screen Lifecycle
187
 
41
 
188
 The `componentDidAppear` and `componentDidDisappear` functions are special React Native Navigation lifecycle callbacks that are called on the component when it appears and disappears. 
42
 The `componentDidAppear` and `componentDidDisappear` functions are special React Native Navigation lifecycle callbacks that are called on the component when it appears and disappears. 

+ 119
- 11
docs/docs/layout-types.md View File

1
 # Layout Types
1
 # Layout Types
2
 
2
 
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
+
5
+You can compose arbitrary native layout hierarchies (although some weird edge cases may not be possible or produce errors). In such cases, open an issue so that we either fix it or warn in dev time.
6
+
3
 ## component
7
 ## component
4
 
8
 
5
 Component layout holds a single react component.
9
 Component layout holds a single react component.
18
 ## stack
22
 ## stack
19
 
23
 
20
 Support children layouts of any kind.
24
 Support children layouts of any kind.
21
-When initialized with more than one screen, the last screen will be presented at the top of the stack.
25
+A stack can be initialised with more then one screen, in which case the last screen will be presented at the top of the stack.
22
 
26
 
23
 ```js
27
 ```js
24
 const stack = {
28
 const stack = {
30
       component: {}
34
       component: {}
31
     }
35
     }
32
   ],
36
   ],
33
-  options: {
34
-
35
-  }
37
+  options: {}
36
 }
38
 }
37
 ```
39
 ```
38
 
40
 
42
 const bottomTabs = {
44
 const bottomTabs = {
43
   children: [
45
   children: [
44
     {
46
     {
45
-      stack: {}
47
+      stack: {
48
+        children: [],
49
+        options: {
50
+          bottomTab: {
51
+            title: 'Tab 1',
52
+            icon: require('../images/one.png')
53
+          }
54
+        }
55
+      }
46
     },
56
     },
47
     {
57
     {
48
       component: {
58
       component: {
49
-        name: 'tab1',
59
+        name: 'secondTabScreen',
50
         options: {
60
         options: {
51
           bottomTab: {
61
           bottomTab: {
52
-            icon: require('icon')
62
+            title: 'Tab 2',
63
+            icon: require('../images/two.png')
53
           }
64
           }
54
         }
65
         }
55
       }
66
       }
56
     }
67
     }
57
   ],
68
   ],
58
-  options: {
59
-
60
-  }
69
+  options: {}
61
 }
70
 }
62
 ```
71
 ```
63
 
72
 
101
     maxWidth: 300, // Maximum width of master view
110
     maxWidth: 300, // Maximum width of master view
102
   },
111
   },
103
 }
112
 }
104
-```
113
+```
114
+
115
+# Layout Examples
116
+
117
+## Single page app with two side menus:
118
+
119
+```js
120
+Navigation.setRoot({
121
+  root: {
122
+    sideMenu: {
123
+      left: {
124
+        component: {
125
+          name: 'navigation.playground.TextScreen',
126
+          passProps: {
127
+            text: 'This is a left side menu screen'
128
+          }
129
+        }
130
+      },
131
+      center: {
132
+        component: {
133
+          name: 'navigation.playground.WelcomeScreen'
134
+        },
135
+      },
136
+      right: {
137
+        component: {
138
+          name: 'navigation.playground.TextScreen',
139
+          passProps: {
140
+            text: 'This is a right side menu screen'
141
+          }
142
+        }
143
+      }
144
+    }
145
+  }
146
+});
147
+```
148
+
149
+## Tab based app (with passProps example):
150
+
151
+```js
152
+Navigation.setRoot({
153
+  root: {
154
+    bottomTabs: {
155
+      children: [
156
+        {
157
+          component: {
158
+            name: 'navigation.playground.TextScreen',
159
+            passProps: {
160
+              text: 'This is tab 1',
161
+              myFunction: () => 'Hello from a function!',
162
+            },
163
+          },
164
+        },
165
+        {
166
+          component: {
167
+            name: 'navigation.playground.TextScreen',
168
+            passProps: {
169
+              text: 'This is tab 2',
170
+            },
171
+          },
172
+        },
173
+      ],
174
+    },
175
+  }
176
+});
177
+```
178
+
179
+## Stack based app (with options example, initialised with 2 screens):
180
+
181
+```js
182
+Navigation.setRoot({
183
+  root: {
184
+    stack: {
185
+      options: {
186
+        topBar: {
187
+          hidden: true
188
+        }
189
+      },
190
+      children: [
191
+        {
192
+          component: {
193
+            name: 'navigation.playground.TextScreen',
194
+            passProps: {
195
+              text: 'This is tab 1',
196
+              myFunction: () => 'Hello from a function!',
197
+            }
198
+          }
199
+        },
200
+        {
201
+          component: {
202
+            name: 'navigation.playground.TextScreen',
203
+            passProps: {
204
+              text: 'This is tab 2',
205
+            }
206
+          }
207
+        }
208
+      ]
209
+    }
210
+  }
211
+});
212
+```