Browse Source

Update README.md

Tal Kol 9 years ago
parent
commit
e2d5b677fa
1 changed files with 71 additions and 15 deletions
  1. 71
    15
      README.md

+ 71
- 15
README.md View File

112
 Navigation.startTabBasedApp({
112
 Navigation.startTabBasedApp({
113
   tabs: [
113
   tabs: [
114
     {
114
     {
115
-      label: 'One',
116
-      screen: 'example.FirstTabScreen',
117
-      icon: require('../img/one.png'),
118
-      selectedIcon: require('../img/one_selected.png'),
119
-      title: 'Screen One'
115
+      label: 'One', // tab label as appears under the icon in iOS (optional)
116
+      screen: 'example.FirstTabScreen', // unique ID registered with Navigation.registerScreen
117
+      icon: require('../img/one.png'), // local image asset for the tab icon unselected state (optional)
118
+      selectedIcon: require('../img/one_selected.png'), // local image asset for the tab icon selected state (optional)
119
+      title: 'Screen One', // title of the screen as appears in the nav bar (optional)
120
+      navigatorStyle: {} // override the navigator style for the tab screen, see "Styling the navigator" below (optional)
120
     },
121
     },
121
     {
122
     {
122
       label: 'Two',
123
       label: 'Two',
136
 ```js
137
 ```js
137
 Navigation.startSingleScreenApp({
138
 Navigation.startSingleScreenApp({
138
   screen: {
139
   screen: {
139
-    screen: 'example.WelcomeScreen',
140
-    title: 'Welcome'
140
+    screen: 'example.WelcomeScreen', // unique ID registered with Navigation.registerScreen
141
+    title: 'Welcome', // title of the screen as appears in the nav bar (optional)
142
+    navigatorStyle: {} // override the navigator style for the screen, see "Styling the navigator" below (optional)
141
   }
143
   }
142
 });
144
 });
143
 ```
145
 ```
148
  
150
  
149
 ```js
151
 ```js
150
 Navigation.showModal({
152
 Navigation.showModal({
151
-  title: "Modal",
152
-  screen: "example.ModalScreen"
153
+  screen: "example.ModalScreen", // unique ID registered with Navigation.registerScreen
154
+  title: "Modal", // title of the screen as appears in the nav bar (optional)
155
+  passProps: {}, // simple serializable object that will pass as props to the modal (optional)
156
+  navigatorStyle: {}, // override the navigator style for the screen, see "Styling the navigator" below (optional)
157
+  animationType: 'slide-up' // 'none' / 'slide-up' , appear animation for the modal (optional, default 'slide-up')
153
 });
158
 });
154
 ```
159
 ```
155
 
160
 
158
 Dismiss the current modal.
163
 Dismiss the current modal.
159
 
164
 
160
 ```js
165
 ```js
161
-Navigation.dismissModal();
166
+Navigation.dismissModal({
167
+  animationType: 'slide-down' // 'none' / 'slide-down' , dismiss animation for the modal (optional, default 'slide-down')
168
+});
162
 ```
169
 ```
163
 
170
 
164
 ## Screen API
171
 ## Screen API
173
 this.navigator.push({
180
 this.navigator.push({
174
   screen: 'example.ScreenThree', // unique ID registered with Navigation.registerScreen
181
   screen: 'example.ScreenThree', // unique ID registered with Navigation.registerScreen
175
   title: undefined, // navigation bar title of the pushed screen (optional)
182
   title: undefined, // navigation bar title of the pushed screen (optional)
176
-  passProps: {}, // simple serializable object that will pass as props to the pushed component (optional)
183
+  passProps: {}, // simple serializable object that will pass as props to the pushed screen (optional)
177
   animated: true, // does the push have transition animation or does it happen immediately (optional)
184
   animated: true, // does the push have transition animation or does it happen immediately (optional)
178
   backButtonTitle: undefined, // override the back button title (optional)
185
   backButtonTitle: undefined, // override the back button title (optional)
179
   navigatorStyle: {} // override the navigator style for the pushed screen (optional)
186
   navigatorStyle: {} // override the navigator style for the pushed screen (optional)
196
  
203
  
197
 ```js
204
 ```js
198
 this.navigator.showModal({
205
 this.navigator.showModal({
199
-  title: "Modal",
200
-  screen: "example.ModalScreen"
206
+  screen: "example.ModalScreen", // unique ID registered with Navigation.registerScreen
207
+  title: "Modal", // title of the screen as appears in the nav bar (optional)
208
+  passProps: {}, // simple serializable object that will pass as props to the modal (optional)
209
+  navigatorStyle: {}, // override the navigator style for the screen, see "Styling the navigator" below (optional)
210
+  animationType: 'slide-up' // 'none' / 'slide-up' , appear animation for the modal (optional, default 'slide-up')
201
 });
211
 });
202
 ```
212
 ```
203
 
213
 
206
 Dismiss the current modal.
216
 Dismiss the current modal.
207
 
217
 
208
 ```js
218
 ```js
209
-this.navigator.dismissModal();
219
+this.navigator.dismissModal({
220
+  animationType: 'slide-down' // 'none' / 'slide-down' , dismiss animation for the modal (optional, default 'slide-down')
221
+});
210
 ```
222
 ```
211
 
223
 
212
 ## Styling the navigator
224
 ## Styling the navigator
213
 
225
 
214
 You can style the navigator appearance and behavior by passing a `navigatorStyle` object. This object can be passed when the screen is originally created; can be defined per-screen in the `static navigatorStyle = {};` on `Screen`; and can be overridden when a screen is pushed.
226
 You can style the navigator appearance and behavior by passing a `navigatorStyle` object. This object can be passed when the screen is originally created; can be defined per-screen in the `static navigatorStyle = {};` on `Screen`; and can be overridden when a screen is pushed.
215
 
227
 
216
-All supported styles are defined [here](https://github.com/wix/react-native-controllers#styling-navigation).
228
+#### Style object format
229
+
230
+```js
231
+{
232
+  navBarTextColor: '#000000', // change the text color of the title (remembered across pushes)
233
+  navBarBackgroundColor: '#f7f7f7', // change the background color of the nav bar (remembered across pushes)
234
+  navBarButtonColor: '#007aff', // change the button colors of the nav bar (eg. the back button) (remembered across pushes)
235
+  navBarHidden: false, // make the nav bar hidden
236
+  navBarHideOnScroll: false, // make the nav bar hidden only after the user starts to scroll
237
+  navBarTranslucent: false, // make the nav bar semi-translucent, works best with drawUnderNavBar:true
238
+  drawUnderNavBar: false, // draw the screen content under the nav bar, works best with navBarTranslucent:true
239
+  drawUnderTabBar: false, // draw the screen content under the tab bar (the tab bar is always translucent)
240
+  statusBarBlur: false, // blur the area under the status bar, works best with navBarHidden:true
241
+  navBarBlur: false, // blur the entire nav bar, works best with drawUnderNavBar:true
242
+  tabBarHidden: false, // make the screen content hide the tab bar (remembered across pushes)
243
+  statusBarHideWithNavBar: false // hide the status bar if the nav bar is also hidden, useful for navBarHidden:true
244
+  statusBarHidden: false, // make the status bar hidden regardless of nav bar state
245
+  statusBarTextColorScheme: 'dark' // text color of status bar, 'dark' / 'light' (remembered across pushes)
246
+}
247
+```
248
+
249
+> Note: If you set any styles related to the Status Bar, make sure that in Xcode > project > Info.plist, the property `View controller-based status bar appearance` is set to `YES`.
250
+
251
+All supported styles are defined [here](https://github.com/wix/react-native-controllers#styling-navigation). There's also an example project there showcasing all the different styles.
252
+
253
+#### Screen-specific style example
254
+
255
+Define a screen-specific style by adding `static navigatorStyle = {};` to the Screen definition.
256
+
257
+```js
258
+class StyledScreen extends Screen {
259
+  static navigatorStyle = {
260
+    drawUnderNavBar: true,
261
+    drawUnderTabBar: true,
262
+    navBarTranslucent: true
263
+  };
264
+  constructor(props) {
265
+    super(props);
266
+  }
267
+  render() {
268
+    return (
269
+      <View style={{flex: 1}}>...</View>
270
+     );
271
+  }
272
+```