Browse Source

[docs] Update part of usage.md to reflect new API changes (#2601)

* Update part of usage.md to reflect new API changes

* Update usage.md
jamsch 6 years ago
parent
commit
211340b22f
1 changed files with 31 additions and 27 deletions
  1. 31
    27
      docs/docs/usage.md

+ 31
- 27
docs/docs/usage.md View File

@@ -12,18 +12,18 @@ How to initiate your app.
12 12
 ```js
13 13
 Navigation.events().onAppLaunched(() => {
14 14
   Navigation.setRoot({
15
-    container: {
15
+    component: {
16 16
       name: 'navigation.playground.WelcomeScreen'
17 17
     }
18 18
   });
19 19
 });
20 20
 ```
21 21
 
22
-### registerContainer(screenID, generator)
22
+### registerComponent(screenID, generator)
23 23
 Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component.
24 24
 
25 25
 ```js
26
-Navigation.registerContainer(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
26
+Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
27 27
 ```
28 28
 
29 29
 ### setRoot({params})
@@ -31,20 +31,22 @@ Start a Single page app with two side menus:
31 31
 
32 32
 ```js
33 33
 Navigation.setRoot({
34
-  container: {
35
-    name: 'navigation.playground.WelcomeScreen'
36
-  },
37 34
   sideMenu: {
38 35
     left: {
39
-      container: {
36
+      component: {
40 37
         name: 'navigation.playground.TextScreen',
41 38
         passProps: {
42 39
           text: 'This is a left side menu screen'
43 40
         }
44 41
       }
45 42
     },
43
+    center: {
44
+      component: {
45
+        name: 'navigation.playground.WelcomeScreen'
46
+      },
47
+    },
46 48
     right: {
47
-      container: {
49
+      component: {
48 50
         name: 'navigation.playground.TextScreen',
49 51
         passProps: {
50 52
           text: 'This is a right side menu screen'
@@ -58,25 +60,27 @@ Start a tab based app:
58 60
 
59 61
 ```js
60 62
 Navigation.setRoot({
61
-  bottomTabs: [
62
-    {
63
-      container: {
64
-        name: 'navigation.playground.TextScreen',
65
-        passProps: {
66
-          text: 'This is tab 1',
67
-          myFunction: () => 'Hello from a function!'
68
-        }
69
-      }
70
-    },
71
-    {
72
-      container: {
73
-        name: 'navigation.playground.TextScreen',
74
-        passProps: {
75
-          text: 'This is tab 2'
76
-        }
77
-      }
78
-    }
79
-  ]
63
+  bottomTabs: {
64
+    children: [
65
+      {
66
+        component: {
67
+          name: 'navigation.playground.TextScreen',
68
+          passProps: {
69
+            text: 'This is tab 1',
70
+            myFunction: () => 'Hello from a function!',
71
+          },
72
+        },
73
+      },
74
+      {
75
+        component: {
76
+          name: 'navigation.playground.TextScreen',
77
+          passProps: {
78
+            text: 'This is tab 2',
79
+          },
80
+        },
81
+      },
82
+    ],
83
+  },
80 84
 });
81 85
 ```
82 86
 ## Screen API