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)
|
||||
```
|
||||
|
||||
### 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
|
||||
- `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
|
||||
- `style` - style object for the content section
|
||||
|
||||
Example:
|
||||
#### Example:
|
||||
|
||||
```js
|
||||
contentOptions: {
|
||||
@ -112,10 +117,19 @@ contentOptions: {
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### 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.
|
||||
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:
|
||||
path: 'people/:username',
|
||||
// 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: {
|
||||
title: ({state}) => `${state.params.username}'s Profile'`,
|
||||
},
|
||||
@ -122,13 +122,23 @@ All `navigationOptions` for the `StackNavigator`:
|
||||
- `style` - Style object for the navigation bar
|
||||
- `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
|
||||
|
||||
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`
|
||||
(this is the default on iOS), `TabView.TabBarTop`
|
||||
@ -138,6 +148,18 @@ tabBarOptions: {
|
||||
|
||||
### 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