Browse Source

Solved doc formatting issues (#2544)

Álvaro Medina Ballester 6 years ago
parent
commit
e2ffed41cf
1 changed files with 32 additions and 22 deletions
  1. 32
    22
      docs/top-level-api.md

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

@@ -15,7 +15,12 @@ Every screen component in your app must be registered with a unique name. The co
15 15
 Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen);
16 16
 
17 17
 // using redux, pass your store and the Provider object from react-redux
18
-Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen, store, Provider);
18
+Navigation.registerComponent(
19
+  'example.FirstTabScreen',
20
+  () => FirstTabScreen,
21
+  store,
22
+  Provider
23
+);
19 24
 ```
20 25
 
21 26
 ## startTabBasedApp(params)
@@ -102,28 +107,32 @@ Navigation.startSingleScreenApp({
102 107
     navigatorStyle: {}, // override the navigator style for the screen, see "Styling the navigator" below (optional)
103 108
     navigatorButtons: {} // override the nav buttons for the screen, see "Adding buttons to the navigator" below (optional)
104 109
   },
105
-  drawer: { // optional, add this if you want a side menu drawer in your app
106
-    left: { // optional, define if you want a drawer from the left
110
+  drawer: {
111
+    // optional, add this if you want a side menu drawer in your app
112
+    left: {
113
+      // optional, define if you want a drawer from the left
107 114
       screen: 'example.FirstSideMenu', // unique ID registered with Navigation.registerScreen
108 115
       passProps: {}, // simple serializable object that will pass as props to all top screens (optional)
109
-      disableOpenGesture: false // can the drawer be opened with a swipe instead of button (optional, Android only)
110
-      fixedWidth: 500, // a fixed width you want your left drawer to have (optional)
116
+      disableOpenGesture: false, // can the drawer be opened with a swipe instead of button (optional, Android only)
117
+      fixedWidth: 500 // a fixed width you want your left drawer to have (optional)
111 118
     },
112
-    right: { // optional, define if you want a drawer from the right
119
+    right: {
120
+      // optional, define if you want a drawer from the right
113 121
       screen: 'example.SecondSideMenu', // unique ID registered with Navigation.registerScreen
114
-      passProps: {} // simple serializable object that will pass as props to all top screens (optional)
115
-      disableOpenGesture: false // can the drawer be opened with a swipe instead of button (optional, Android only)
116
-      fixedWidth: 500, // a fixed width you want your right drawer to have (optional)
122
+      passProps: {}, // simple serializable object that will pass as props to all top screens (optional)
123
+      disableOpenGesture: false, // can the drawer be opened with a swipe instead of button (optional, Android only)
124
+      fixedWidth: 500 // a fixed width you want your right drawer to have (optional)
117 125
     },
118
-    style: { // ( iOS only )
119
-      drawerShadow: true, // optional, add this if you want a side menu drawer shadow
120
-      contentOverlayColor: 'rgba(0,0,0,0.25)', // optional, add this if you want a overlay color when drawer is open
126
+    style: {
127
+      // ( iOS only )
128
+      drawerShadow: true, // optional, add this if you want a side menu drawer shadow
129
+      contentOverlayColor: 'rgba(0,0,0,0.25)', // optional, add this if you want a overlay color when drawer is open
121 130
       leftDrawerWidth: 50, // optional, add this if you want a define left drawer width (50=percent)
122 131
       rightDrawerWidth: 50 // optional, add this if you want a define right drawer width (50=percent)
123 132
     },
124 133
     type: 'MMDrawer', // optional, iOS only, types: 'TheSideBar', 'MMDrawer' default: 'MMDrawer'
125 134
     animationType: 'door', //optional, iOS only, for MMDrawer: 'door', 'parallax', 'slide', 'slide-and-scale'
126
-                                        // for TheSideBar: 'airbnb', 'facebook', 'luvocracy','wunder-list'
135
+    // for TheSideBar: 'airbnb', 'facebook', 'luvocracy','wunder-list'
127 136
     disableOpenGesture: false // optional, can the drawer, both right and left, be opened with a swipe instead of button
128 137
   },
129 138
   passProps: {}, // simple serializable object that will pass as props to all top screens (optional)
@@ -137,8 +146,8 @@ Show a screen as a modal.
137 146
 
138 147
 ```js
139 148
 Navigation.showModal({
140
-  screen: "example.ModalScreen", // unique ID registered with Navigation.registerScreen
141
-  title: "Modal", // title of the screen as appears in the nav bar (optional)
149
+  screen: 'example.ModalScreen', // unique ID registered with Navigation.registerScreen
150
+  title: 'Modal', // title of the screen as appears in the nav bar (optional)
142 151
   passProps: {}, // simple serializable object that will pass as props to the modal (optional)
143 152
   navigatorStyle: {}, // override the navigator style for the screen, see "Styling the navigator" below (optional)
144 153
   navigatorButtons: {}, // override the nav buttons for the screen, see "Adding buttons to the navigator" below (optional)
@@ -172,11 +181,11 @@ Show a screen as a lightbox.
172 181
 
173 182
 ```js
174 183
 Navigation.showLightBox({
175
-  screen: "example.LightBoxScreen", // unique ID registered with Navigation.registerScreen
184
+  screen: 'example.LightBoxScreen', // unique ID registered with Navigation.registerScreen
176 185
   passProps: {}, // simple serializable object that will pass as props to the lightbox (optional)
177 186
   style: {
178
-    backgroundBlur: "dark", // 'dark' / 'light' / 'xlight' / 'none' - the type of blur on the background
179
-    backgroundColor: "#ff000080", // tint color for the background, you can specify alpha here (optional)
187
+    backgroundBlur: 'dark', // 'dark' / 'light' / 'xlight' / 'none' - the type of blur on the background
188
+    backgroundColor: '#ff000080', // tint color for the background, you can specify alpha here (optional)
180 189
     tapBackgroundToDismiss: true // dismisses LightBox on background taps (optional)
181 190
   }
182 191
 });
@@ -195,10 +204,10 @@ Navigation.dismissLightBox();
195 204
 Trigger a deep link within the app. See [deep links](https://wix.github.io/react-native-navigation/#/deep-links) for more details about how screens can listen for deep link events.
196 205
 
197 206
 ```js
198
-  Navigation.handleDeepLink({
199
-    link: 'link/in/any/format',
200
-    payload: '' // (optional) Extra payload with deep link
201
-  });
207
+Navigation.handleDeepLink({
208
+  link: 'link/in/any/format',
209
+  payload: '' // (optional) Extra payload with deep link
210
+});
202 211
 ```
203 212
 
204 213
 ## registerScreen(screenID, generator)
@@ -210,6 +219,7 @@ Navigation.registerScreen('example.AdvancedScreen', () => AdvancedScreen);
210 219
 ```
211 220
 
212 221
 ## getCurrentlyVisibleScreenId()
222
+
213 223
 In some cases you might need the id of the currently visible screen. This method returns the unique id of the currently visible screen:
214 224
 `const visibleScreenInstanceId = await Navigation.getCurrentlyVisibleScreenId()`
215 225
 In order to have any use of this method, you'd need to map instanceId to screens your self.