mirror of
https://github.com/status-im/react-navigation.git
synced 2025-02-24 17:18:09 +00:00
Add screenProps
example and improve docs (#101)
This commit is contained in:
parent
7a20389e04
commit
b805978d9b
@ -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 */}
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
@ -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
|
|
||||||
|
@ -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 */}
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user