npm
/
react-native-navigation
Watch 11
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

updated docs

yogevbd 6 years ago
parent
f3efebe8ca
commit
2a65abe6e1
3 changed files with 143 additions and 129 deletions
Split View Show Diff Stats
  1. 65
    57
      docs/docs/Usage.md
  2. 46
    42
      docs/docs/top-level-api-migration.md
  3. 32
    30
      docs/docs/top-level-api.md

+ 65
- 57
docs/docs/Usage.md View File 

@@ -29,8 +29,10 @@ Afterwards, the app is ready for user interaction. (Common gotcha: Be sure not t
29 29 
 ```js
30 30 
 Navigation.events().registerAppLaunchedListener(() => {
31 31 
   Navigation.setRoot({
32 
-    component: {
33 
-      name: 'navigation.playground.WelcomeScreen'
32 
+    root: {
33 
+      component: {
34 
+        name: 'navigation.playground.WelcomeScreen'
35 
+      }
34 36 
     }
35 37 
   });
36 38 
 });
 
@@ -49,25 +51,27 @@ For all possible layout types see [API](/api/README).
49 51
50 52 
 ```js
51 53 
 Navigation.setRoot({
52 
-  sideMenu: {
53 
-    left: {
54 
-      component: {
55 
-        name: 'navigation.playground.TextScreen',
56 
-        passProps: {
57 
-          text: 'This is a left side menu screen'
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 
+          }
58 62 
         }
59 
-      }
60 
-    },
61 
-    center: {
62 
-      component: {
63 
-        name: 'navigation.playground.WelcomeScreen'
64 63 
       },
65 
-    },
66 
-    right: {
67 
-      component: {
68 
-        name: 'navigation.playground.TextScreen',
69 
-        passProps: {
70 
-          text: 'This is a right side menu screen'
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 
+          }
71 75 
         }
72 76 
       }
73 77 
     }
 
@@ -79,27 +83,29 @@ Navigation.setRoot({
79 83
80 84 
 ```js
81 85 
 Navigation.setRoot({
82 
-  bottomTabs: {
83 
-    children: [
84 
-      {
85 
-        component: {
86 
-          name: 'navigation.playground.TextScreen',
87 
-          passProps: {
88 
-            text: 'This is tab 1',
89 
-            myFunction: () => 'Hello from a function!',
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 
+            },
90 96 
           },
91 97 
         },
92 
-      },
93 
-      {
94 
-        component: {
95 
-          name: 'navigation.playground.TextScreen',
96 
-          passProps: {
97 
-            text: 'This is tab 2',
98 
+        {
99 
+          component: {
100 
+            name: 'navigation.playground.TextScreen',
101 
+            passProps: {
102 
+              text: 'This is tab 2',
103 
+            },
98 104 
           },
99 105 
         },
100 
-      },
101 
-    ],
102 
-  },
106 
+      ],
107 
+    },
108 
+  }
103 109 
 });
104 110 
 ```
105 111 
 
@@ -107,32 +113,34 @@ Navigation.setRoot({
107 113
108 114 
 ```js
109 115 
 Navigation.setRoot({
110 
-  stack: {
111 
-    options: {
112 
-      topBar: {
113 
-        hidden: true,
116 
+  root: {
117 
+    stack: {
118 
+      options: {
119 
+        topBar: {
120 
+          hidden: true,
121 
+        },
114 122 
       },
115 
-    },
116 
-    children: [
117 
-      {
118 
-        component: {
119 
-          name: 'navigation.playground.TextScreen',
120 
-          passProps: {
121 
-            text: 'This is tab 1',
122 
-            myFunction: () => 'Hello from a function!',
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 
+            },
123 131 
           },
124 132 
         },
125 
-      },
126 
-      {
127 
-        component: {
128 
-          name: 'navigation.playground.TextScreen',
129 
-          passProps: {
130 
-            text: 'This is tab 2',
133 
+        {
134 
+          component: {
135 
+            name: 'navigation.playground.TextScreen',
136 
+            passProps: {
137 
+              text: 'This is tab 2',
138 
+            },
131 139 
           },
132 140 
         },
133 
-      },
134 
-    ],
135 
-  },
141 
+      ],
142 
+    },
143 
+  }
136 144 
 });
137 145 
 ```
138 146

+ 46
- 42
docs/docs/top-level-api-migration.md View File 

@@ -6,41 +6,43 @@ In order to make our API homogenous as much as possible, we provide setRoot func
6 6
7 7 
 ```js
8 8 
 Navigation.setRoot({
9 
-  bottomTabs: {
10 
-    children: [{
11 
-      stack: {
12 
-        children: [{
13 
-          component: {
14 
-            name: 'example.FirstTabScreen',
15 
-            passProps: {
16 
-              text: 'This is tab 1'
9 
+  root: {
10 
+    bottomTabs: {
11 
+      children: [{
12 
+        stack: {
13 
+          children: [{
14 
+            component: {
15 
+              name: 'example.FirstTabScreen',
16 
+              passProps: {
17 
+                text: 'This is tab 1'
18 
+              }
19 
+            }
20 
+          }],
21 
+          options: {
22 
+            bottomTab: {
23 
+              title: 'Tab 1',
24 
+              icon: require('../images/one.png'),
25 
+              testID: 'FIRST_TAB_BAR_BUTTON'
17 26 
             }
18 
-          }
19 
-        }],
20 
-        options: {
21 
-          bottomTab: {
22 
-            title: 'Tab 1',
23 
-            icon: require('../images/one.png'),
24 
-            testID: 'FIRST_TAB_BAR_BUTTON'
25 27 
           }
26 28 
         }
27 
-      }
28 
-    },
29 
-    {
30 
-      component: {
31 
-        name: 'navigation.playground.TextScreen',
32 
-        passProps: {
33 
-          text: 'This is tab 2'
34 
-        },
35 
-        options: {
36 
-          bottomTab: {
37 
-            title: 'Tab 2',
38 
-            icon: require('../images/two.png'),
39 
-            testID: 'SECOND_TAB_BAR_BUTTON'
29 
+      },
30 
+      {
31 
+        component: {
32 
+          name: 'navigation.playground.TextScreen',
33 
+          passProps: {
34 
+            text: 'This is tab 2'
35 
+          },
36 
+          options: {
37 
+            bottomTab: {
38 
+              title: 'Tab 2',
39 
+              icon: require('../images/two.png'),
40 
+              testID: 'SECOND_TAB_BAR_BUTTON'
41 
+            }
40 42 
           }
41 43 
         }
42 
-      }
43 
-    }]
44 
+      }]
45 
+    }
44 46 
   }
45 47 
 });
46 48 
 ```
 
@@ -51,19 +53,21 @@ Change your app root into an app based on a single screen (like the iOS Calendar
51 53
52 54 
 ```js
53 55 
 Navigation.setRoot({
54 
-  stack: {
55 
-    children: [{
56 
-      component: {
57 
-        name: 'example.WelcomeScreen',
58 
-        passProps: {
59 
-          text: 'stack with one child'
56 
+  root: {
57 
+    stack: {
58 
+      children: [{
59 
+        component: {
60 
+          name: 'example.WelcomeScreen',
61 
+          passProps: {
62 
+            text: 'stack with one child'
63 
+          }
60 64 
         }
61 
-      }
62 
-    }],
63 
-    options: {
64 
-      topBar: {
65 
-        title: {
66 
-          text: 'Welcome screen'
65 
+      }],
66 
+      options: {
67 
+        topBar: {
68 
+          title: {
69 
+            text: 'Welcome screen'
70 
+          }
67 71 
         }
68 72 
       }
69 73 
     }

+ 32
- 30
docs/docs/top-level-api.md View File 

@@ -9,41 +9,43 @@ See [Layout types](docs/layout-types)
9 9
10 10 
 ```js
11 11 
 Navigation.setRoot({
12 
-  bottomTabs: {
13 
-    children: [{
14 
-      stack: {
15 
-        children: [{
16 
-          component: {
17 
-            name: 'example.FirstTabScreen',
18 
-            passProps: {
19 
-              text: 'This is tab 1'
12 
+  root: {
13 
+    bottomTabs: {
14 
+      children: [{
15 
+        stack: {
16 
+          children: [{
17 
+            component: {
18 
+              name: 'example.FirstTabScreen',
19 
+              passProps: {
20 
+                text: 'This is tab 1'
21 
+              }
22 
+            }
23 
+          }],
24 
+          options: {
25 
+            bottomTab: {
26 
+              title: 'Tab 1',
27 
+              icon: require('../images/one.png'),
28 
+              testID: 'FIRST_TAB_BAR_BUTTON'
20 29 
             }
21 
-          }
22 
-        }],
23 
-        options: {
24 
-          bottomTab: {
25 
-            title: 'Tab 1',
26 
-            icon: require('../images/one.png'),
27 
-            testID: 'FIRST_TAB_BAR_BUTTON'
28 30 
           }
29 31 
         }
30 
-      }
31 
-    },
32 
-    {
33 
-      component: {
34 
-        name: 'navigation.playground.TextScreen',
35 
-        passProps: {
36 
-          text: 'This is tab 2'
37 
-        },
38 
-        options: {
39 
-          bottomTab: {
40 
-            title: 'Tab 2',
41 
-            icon: require('../images/two.png'),
42 
-            testID: 'SECOND_TAB_BAR_BUTTON'
32 
+      },
33 
+      {
34 
+        component: {
35 
+          name: 'navigation.playground.TextScreen',
36 
+          passProps: {
37 
+            text: 'This is tab 2'
38 
+          },
39 
+          options: {
40 
+            bottomTab: {
41 
+              title: 'Tab 2',
42 
+              icon: require('../images/two.png'),
43 
+              testID: 'SECOND_TAB_BAR_BUTTON'
44 
+            }
43 45 
           }
44 46 
         }
45 
-      }
46 
-    }]
47 
+      }]
48 
+    }
47 49 
   }
48 50 
 });
49 51 
 ```