|
|
|
|
15
|
Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen);
|
15
|
Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen);
|
16
|
|
16
|
|
17
|
// using redux, pass your store and the Provider object from react-redux
|
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
|
## startTabBasedApp(params)
|
26
|
## startTabBasedApp(params)
|
|
|
|
|
102
|
navigatorStyle: {}, // override the navigator style for the screen, see "Styling the navigator" below (optional)
|
107
|
navigatorStyle: {}, // override the navigator style for the screen, see "Styling the navigator" below (optional)
|
103
|
navigatorButtons: {} // override the nav buttons for the screen, see "Adding buttons to the navigator" below (optional)
|
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
|
screen: 'example.FirstSideMenu', // unique ID registered with Navigation.registerScreen
|
114
|
screen: 'example.FirstSideMenu', // unique ID registered with Navigation.registerScreen
|
108
|
passProps: {}, // simple serializable object that will pass as props to all top screens (optional)
|
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
|
screen: 'example.SecondSideMenu', // unique ID registered with Navigation.registerScreen
|
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
|
leftDrawerWidth: 50, // optional, add this if you want a define left drawer width (50=percent)
|
130
|
leftDrawerWidth: 50, // optional, add this if you want a define left drawer width (50=percent)
|
122
|
rightDrawerWidth: 50 // optional, add this if you want a define right drawer width (50=percent)
|
131
|
rightDrawerWidth: 50 // optional, add this if you want a define right drawer width (50=percent)
|
123
|
},
|
132
|
},
|
124
|
type: 'MMDrawer', // optional, iOS only, types: 'TheSideBar', 'MMDrawer' default: 'MMDrawer'
|
133
|
type: 'MMDrawer', // optional, iOS only, types: 'TheSideBar', 'MMDrawer' default: 'MMDrawer'
|
125
|
animationType: 'door', //optional, iOS only, for MMDrawer: 'door', 'parallax', 'slide', 'slide-and-scale'
|
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
|
disableOpenGesture: false // optional, can the drawer, both right and left, be opened with a swipe instead of button
|
136
|
disableOpenGesture: false // optional, can the drawer, both right and left, be opened with a swipe instead of button
|
128
|
},
|
137
|
},
|
129
|
passProps: {}, // simple serializable object that will pass as props to all top screens (optional)
|
138
|
passProps: {}, // simple serializable object that will pass as props to all top screens (optional)
|
|
|
|
|
137
|
|
146
|
|
138
|
```js
|
147
|
```js
|
139
|
Navigation.showModal({
|
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
|
passProps: {}, // simple serializable object that will pass as props to the modal (optional)
|
151
|
passProps: {}, // simple serializable object that will pass as props to the modal (optional)
|
143
|
navigatorStyle: {}, // override the navigator style for the screen, see "Styling the navigator" below (optional)
|
152
|
navigatorStyle: {}, // override the navigator style for the screen, see "Styling the navigator" below (optional)
|
144
|
navigatorButtons: {}, // override the nav buttons for the screen, see "Adding buttons to the navigator" below (optional)
|
153
|
navigatorButtons: {}, // override the nav buttons for the screen, see "Adding buttons to the navigator" below (optional)
|
|
|
|
|
172
|
|
181
|
|
173
|
```js
|
182
|
```js
|
174
|
Navigation.showLightBox({
|
183
|
Navigation.showLightBox({
|
175
|
- screen: "example.LightBoxScreen", // unique ID registered with Navigation.registerScreen
|
|
|
|
|
184
|
+ screen: 'example.LightBoxScreen', // unique ID registered with Navigation.registerScreen
|
176
|
passProps: {}, // simple serializable object that will pass as props to the lightbox (optional)
|
185
|
passProps: {}, // simple serializable object that will pass as props to the lightbox (optional)
|
177
|
style: {
|
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
|
tapBackgroundToDismiss: true // dismisses LightBox on background taps (optional)
|
189
|
tapBackgroundToDismiss: true // dismisses LightBox on background taps (optional)
|
181
|
}
|
190
|
}
|
182
|
});
|
191
|
});
|
|
|
|
|
195
|
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.
|
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
|
```js
|
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
|
## registerScreen(screenID, generator)
|
213
|
## registerScreen(screenID, generator)
|
|
|
|
|
210
|
```
|
219
|
```
|
211
|
|
220
|
|
212
|
## getCurrentlyVisibleScreenId()
|
221
|
## getCurrentlyVisibleScreenId()
|
|
|
222
|
+
|
213
|
In some cases you might need the id of the currently visible screen. This method returns the unique id of the currently visible screen:
|
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
|
`const visibleScreenInstanceId = await Navigation.getCurrentlyVisibleScreenId()`
|
224
|
`const visibleScreenInstanceId = await Navigation.getCurrentlyVisibleScreenId()`
|
215
|
In order to have any use of this method, you'd need to map instanceId to screens your self.
|
225
|
In order to have any use of this method, you'd need to map instanceId to screens your self.
|