瀏覽代碼

Add a comparison between v1-v2 options

Guy Carmeli 6 年之前
父節點
當前提交
f112bee882
共有 3 個文件被更改,包括 457 次插入1 次删除
  1. 1
    0
      docs/_sidebar.md
  2. 453
    0
      docs/docs/options-migration.md
  3. 3
    1
      docs/docs/styling.md

+ 1
- 0
docs/_sidebar.md 查看文件

@@ -13,4 +13,5 @@
13 13
   - [Animations](/docs/animations)
14 14
 - Migration from v1
15 15
   - [Top Level](/docs/top-level-api-migration)
16
+  - [Options](/docs/options-migration)
16 17
 - [API](/api/README)

+ 453
- 0
docs/docs/options-migration.md 查看文件

@@ -0,0 +1,453 @@
1
+# Common Options
2
+
3
+## navBarTextColor
4
+```js
5
+topBar: {
6
+  title: {
7
+    color: 'red'
8
+  }
9
+}
10
+```
11
+
12
+## navBarTextFontSize
13
+```js
14
+topBar: {
15
+  title: {
16
+    fontSize: 'red'
17
+  }
18
+}
19
+```
20
+
21
+## navBarTextFontFamily
22
+```js
23
+topBar: {
24
+  title: {
25
+    fontFamily: 'Helvetica'
26
+  }
27
+}
28
+```
29
+
30
+## navBarBackgroundColor
31
+```js
32
+topBar: {
33
+  background: {
34
+    color: 'red'
35
+  }
36
+}  
37
+```
38
+
39
+## navBarCustomView
40
+```js
41
+topBar: {
42
+  background: {
43
+    component: {
44
+      name: 'example.CustomTopBarBackground'
45
+    }
46
+  },
47
+  title: {
48
+    component: {
49
+      name: 'example.CustomTopBarTitle'
50
+    }
51
+  }
52
+}
53
+```
54
+
55
+## navBarComponentAlignment
56
+```js
57
+topBar: {
58
+  title: {
59
+    component: {
60
+      name: 'example.CustomTopBarTitle',
61
+      alignment: 'center'
62
+    }
63
+  }
64
+}  
65
+```
66
+
67
+## navBarCustomViewInitialProps
68
+```js
69
+topBar: {
70
+  background: {
71
+    component: {
72
+      name: 'example.CustomTopBarBackground',
73
+      passProps: {}
74
+    }
75
+  },
76
+  title: {
77
+    component: {
78
+      name: 'example.CustomTopBarTitle',
79
+      passProps: {}
80
+    }
81
+  }
82
+} 
83
+```
84
+
85
+## navBarButtonColor
86
+```js
87
+topBar: {
88
+  rightButtons: [
89
+    {
90
+      color: 'red'
91
+    }
92
+  ]
93
+}
94
+```
95
+
96
+## topBarElevationShadowEnabled
97
+```js
98
+topBar: {
99
+  elevation: 0
100
+}
101
+```
102
+
103
+## navBarHidden
104
+```js
105
+topBar: {
106
+  visible: false
107
+} 
108
+```
109
+
110
+## navBarTransparent
111
+```js
112
+topBar: {
113
+  transparent: true
114
+}  
115
+```
116
+
117
+## drawUnderNavBar
118
+```js
119
+topBar: {
120
+  drawBehind: true
121
+}  
122
+```
123
+
124
+## drawUnderTabBar
125
+```js
126
+bottomTabs: {
127
+  drawBehind: true
128
+}  
129
+```
130
+
131
+## tabBarHidden
132
+```js
133
+bottomTabs: {
134
+  visible: false
135
+}  
136
+```
137
+
138
+## statusBarHidden
139
+```js
140
+statusBar: {
141
+  visible: false
142
+}  
143
+```
144
+
145
+## statusBarTextColorScheme
146
+```js
147
+statusBar: {
148
+  style: 'light' | 'dark'
149
+}
150
+```
151
+
152
+## navBarSubtitleColor
153
+```js
154
+topBar: {
155
+  subtitle: {
156
+    color: 'red'
157
+  }
158
+}
159
+```
160
+
161
+## navBarSubtitleFontFamily
162
+```js
163
+topBar: {
164
+  subtitle: {
165
+    fontFamily: 'Helvetica'
166
+  }
167
+}
168
+```
169
+
170
+## navBarSubtitleFontSize
171
+```js
172
+topBar: {
173
+  subtitle: {
174
+    fontSize: 14
175
+  }
176
+}
177
+```
178
+
179
+## screenBackgroundColor
180
+```js
181
+layout: {
182
+  backgroundColor: 'red'
183
+}  
184
+```
185
+
186
+## orientation
187
+```js
188
+layout: {
189
+  orientation: ['portrait', 'landscape'] // An array of supported orientations
190
+}
191
+```
192
+
193
+## disabledButtonColor
194
+```js
195
+topBar: {
196
+  rightButtons: [
197
+    {
198
+      disabledColor: 'grey'
199
+    }
200
+  ]
201
+}
202
+```
203
+
204
+## navBarButtonFontSize
205
+```js
206
+topBar: {
207
+  rightButtons: [
208
+    {
209
+      fontSize: 13
210
+    }
211
+  ]
212
+}  
213
+```
214
+
215
+## navBarLeftButtonFontSize
216
+```js
217
+{
218
+  topBar: {
219
+    leftButtons: [
220
+      {
221
+        fontSize: 13
222
+      }
223
+    ]
224
+  }
225
+}
226
+```
227
+
228
+## navBarLeftButtonColor
229
+```js
230
+{
231
+  topBar: {
232
+    leftButtons: [
233
+      {
234
+        color: 'red'
235
+      }
236
+    ]
237
+  }
238
+}
239
+```
240
+
241
+## navBarLeftButtonFontWeight
242
+```js
243
+{
244
+  topBar: {
245
+    leftButtons: [
246
+      {
247
+        weight: '300'
248
+      }
249
+    ]
250
+  }
251
+}  
252
+```
253
+
254
+## navBarRightButtonFontSize
255
+```js
256
+topBar: {
257
+  leftButtons: [
258
+    {
259
+      fontSize: 13
260
+    }
261
+  ]
262
+}
263
+```
264
+
265
+## navBarRightButtonColor
266
+```js
267
+topBar: {
268
+  rightButtons: [
269
+    {
270
+      color: 'red'
271
+    }
272
+  ]
273
+}
274
+```
275
+
276
+## navBarRightButtonFontWeight
277
+```js
278
+topBar: {
279
+  rightButtons: [
280
+    {
281
+      weight: '400'
282
+    }
283
+  ]
284
+} 
285
+```
286
+
287
+## modalPresentationStyle
288
+```js
289
+{
290
+modalPresentationStyle: 'overCurrentContext' // Supported styles are: 'formSheet', 'pageSheet', 'overFullScreen', 'overCurrentContext', 'currentContext', 'popOver', 'fullScreen' and 'none'. On Android, only overCurrentContext and none are supported.
291
+}
292
+```
293
+
294
+## navBarButtonFontFamily
295
+```js
296
+topBar: {
297
+  rightButtons: [
298
+    {
299
+      fontFamily: 'Helvetica'
300
+    }
301
+  ]
302
+}
303
+```
304
+
305
+# iOS only
306
+
307
+## navBarHideOnScroll
308
+```js
309
+topBar: {
310
+  hideOnScroll: true
311
+}
312
+```
313
+
314
+## navBarTranslucent
315
+```js
316
+topBar: {
317
+  translucent: true
318
+}
319
+```
320
+
321
+## navBarNoBorder
322
+```js
323
+topBar: {
324
+  noBorder: true
325
+}  
326
+```
327
+
328
+## navBarBlur
329
+```js
330
+topBar: {
331
+  blur: true
332
+}  
333
+```
334
+
335
+## rootBackgroundImageName
336
+```js
337
+{
338
+  rootBackgroundImage: require('rootBackground.png')
339
+}
340
+```
341
+
342
+## statusBarHideWithNavBar
343
+```js
344
+statusBar: {
345
+  hideWithTopBar: true
346
+}
347
+```
348
+
349
+## statusBarBlur
350
+```js
351
+statusBar: {
352
+  blur: true
353
+}  
354
+```
355
+
356
+## disabledBackGesture
357
+```js
358
+{
359
+  popGesture: false
360
+} 
361
+```
362
+
363
+## screenBackgroundImageName
364
+```js
365
+{
366
+  backgroundImage: require('background.png')
367
+}
368
+```
369
+
370
+## largeTitle
371
+```js
372
+  topBar: {
373
+    largeTitle: {
374
+      visible: true,
375
+      fontSize: 30,
376
+      color: 'red',
377
+      fontFamily: 'Helvetica'
378
+    }
379
+  }
380
+```
381
+
382
+# Android Options
383
+
384
+## navBarTitleTextCentered
385
+```js
386
+topBar: {
387
+  alignment: 'center'
388
+}
389
+```
390
+
391
+## statusBarColor
392
+```js
393
+statusBar: {
394
+  backgroundColor: 'red'
395
+}
396
+```
397
+
398
+## drawUnderStatusBar
399
+```js
400
+statusBar: {
401
+  drawBehind: true
402
+}
403
+```
404
+
405
+## navBarHeight
406
+```js
407
+topBar: {
408
+  height: 70, // TopBar height in dp
409
+}
410
+```
411
+
412
+## navBarTopPadding
413
+```js
414
+layout: {
415
+    topMargin: 26 // Set the layout's top margin in dp
416
+  }
417
+```
418
+
419
+## topTabsHeight
420
+```js
421
+topTabs: {
422
+  height: 70
423
+}
424
+```
425
+
426
+## topBarBorderColor
427
+```js
428
+topBar: {
429
+  borderColor: 'red'
430
+}
431
+```
432
+
433
+## topBarBorderWidth
434
+```js
435
+topBar: {
436
+  borderHeight: 1.3
437
+} 
438
+```
439
+
440
+# Unsupported options
441
+* disabledSimultaneousGesture
442
+* statusBarTextColorSchemeSingleScreen
443
+* navBarButtonFontWeight
444
+* topBarShadowColor
445
+* topBarShadowOpacity
446
+* topBarShadowOffset
447
+* topBarShadowRadius
448
+* preferredContentSize
449
+* navigationBarColor
450
+* navBarSubTitleTextCentered
451
+* collapsingToolBarImage
452
+* collapsingToolBarCollapsedColor
453
+* navBarTextFontBold

+ 3
- 1
docs/docs/styling.md 查看文件

@@ -204,7 +204,9 @@ Navigation.mergeOptions(this.props.componentId, {
204 204
 ```js
205 205
 {
206 206
   statusBar: {
207
-    backgroundColor: 'red'
207
+    backgroundColor: 'red',
208
+    drawBehind: true,
209
+    visible: false
208 210
   },
209 211
   layout: {
210 212
     topMargin: Navigation.constants().statusBarHeight // Set the layout's top margin