Add screenProps example and improve docs (#101)

This commit is contained in:
Jeremy Lu 2017-02-02 05:27:05 +08:00 committed by Satyajit Sahoo
parent 7a20389e04
commit b805978d9b
3 changed files with 63 additions and 17 deletions

View File

@ -79,7 +79,12 @@ this.props.navigation.navigate('DrawerClose'); // close drawer
DrawerNavigator(RouteConfigs, DrawerNavigatorConfig) DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)
``` ```
### Drawer Navigator Options ### RouteConfigs
The route configs object is a mapping from route name to a route config, which tells the navigator what to present for that route, see [example](https://github.com/coodoo/react-navigation/blob/master/docs/api/navigators/StackNavigator.md#routeconfigs) from `StackNavigator`.
### DrawerNavigatorConfig
- `drawerWidth` - Width of the drawer - `drawerWidth` - Width of the drawer
- `drawerPosition` - Options are `left` or `right`. Default is `left` position. - `drawerPosition` - Options are `left` or `right`. Default is `left` position.
@ -101,7 +106,7 @@ Several options get passed to the underlying router to modify navigation logic:
- `inactiveBackgroundColor` - background color of the inactive label - `inactiveBackgroundColor` - background color of the inactive label
- `style` - style object for the content section - `style` - style object for the content section
Example: #### Example:
```js ```js
contentOptions: { contentOptions: {
@ -112,10 +117,19 @@ contentOptions: {
} }
``` ```
### Navigator Props ### Navigator Props
The navigator component created by `DrawerNavigator(...)` takes the following props, The navigator component created by `DrawerNavigator(...)` takes the following props:
- `screenProps` - Props to pass to each child screen - `screenProps` - Pass down extra options to child screens, for example:
```jsx
const DrawerNav = DrawerNavigator({
// config
});
<DrawerNav
screenProps={/* these will get passed to the screen components */}
/>
```

View File

@ -50,13 +50,13 @@ StackNavigator({
// `ProfileScreen` is a React component that will be the main content of the screen. // `ProfileScreen` is a React component that will be the main content of the screen.
screen: ProfileScreen, screen: ProfileScreen,
// When `ProfileScreen` is loaded by the StackNavigator, it will be given a navigation prop. // When `ProfileScreen` is loaded by the StackNavigator, it will be given a `navigation` prop.
// Optional: When deep linking or using react-navigation in a web app, this path is used: // Optional: When deep linking or using react-navigation in a web app, this path is used:
path: 'people/:username', path: 'people/:username',
// The action and route params are extracted from the path. // The action and route params are extracted from the path.
// Optional: Override the navigation options for the screen // Optional: Override the `navigationOptions` for the screen
navigationOptions: { navigationOptions: {
title: ({state}) => `${state.params.username}'s Profile'`, title: ({state}) => `${state.params.username}'s Profile'`,
}, },
@ -122,13 +122,23 @@ All `navigationOptions` for the `StackNavigator`:
- `style` - Style object for the navigation bar - `style` - Style object for the navigation bar
- `tintColor` - Tint color for the header - `tintColor` - Tint color for the header
### Navigator Props
The navigator component created by `StackNavigator(...)` takes the following props:
- `screenProps` - Pass down extra options to child screens, for example:
```jsx
const SomeStack = StackNavigator({
// config
});
<SomeStack
screenProps={/* these will get passed to the screen components */}
/>
```
### Examples ### Examples
See the examples [SimpleStack.js](https://github.com/react-community/react-navigation/tree/master/examples/NavigationPlayground/js/SimpleStack.js) and [ModalStack.js](https://github.com/react-community/react-navigation/tree/master/examples/NavigationPlayground/js/ModalStack.js) which you can run locally as part of the [NavigationPlayground](https://github.com/react-community/react-navigation/tree/master/examples/NavigationPlayground) app. See the examples [SimpleStack.js](https://github.com/react-community/react-navigation/tree/master/examples/NavigationPlayground/js/SimpleStack.js) and [ModalStack.js](https://github.com/react-community/react-navigation/tree/master/examples/NavigationPlayground/js/ModalStack.js) which you can run locally as part of the [NavigationPlayground](https://github.com/react-community/react-navigation/tree/master/examples/NavigationPlayground) app.
### Navigator Props
The navigator component created by `StackNavigator(...)` takes the following props,
- `screenProps` - Props to pass to each child screen

View File

@ -71,7 +71,17 @@ const MyApp = TabNavigator({
}); });
``` ```
### Tab Navigator Options ## API Definition
```js
TabNavigator(RouteConfigs, TabNavigatorConfig)
```
### RouteConfigs
The route configs object is a mapping from route name to a route config, which tells the navigator what to present for that route, see [example](https://github.com/coodoo/react-navigation/blob/master/docs/api/navigators/StackNavigator.md#routeconfigs) from `StackNavigator`.
### TabNavigatorConfig
- `tabBarComponent` - component to use as the tab bar, e.g. `TabView.TabBarBottom` - `tabBarComponent` - component to use as the tab bar, e.g. `TabView.TabBarBottom`
(this is the default on iOS), `TabView.TabBarTop` (this is the default on iOS), `TabView.TabBarTop`
@ -138,6 +148,18 @@ tabBarOptions: {
### Navigator Props ### Navigator Props
The navigator component created by `TabNavigator(...)` takes the following props, The navigator component created by `TabNavigator(...)` takes the following props:
- `screenProps` - Props to pass to each child screen - `screenProps` - Pass down extra options to child screens, for example:
```jsx
const TabNav = TabNavigator({
// config
});
<TabNav
screenProps={/* these will get passed to the screen components */}
/>
```