Add doc note for nesting wrapped navigator (#1947)

After having to look for a solution for nesting a navigator embedded in a component, found this issue that dealt with the same problem: https://github.com/react-community/react-navigation/issues/90.
Added the solution to the guide as a side note.
This commit is contained in:
Nimrod Argov
2017-06-24 03:18:13 +03:00
parent c445a5ecf9
commit 6ac778fa01

View File

@@ -72,3 +72,43 @@ Now we have put one navigator inside another, and we can `navigate` between navi
```phone-example
nested
```
## Nesting a Navigator in a Component
Sometimes it is desirable to nest a navigator that is wrapped in a component. This is useful in cases where the navigator only takes up part of the screen. For the child navigator to be wired into the navigation tree, it needs the `navigation` property from the parent navigator.
```js
const SimpleApp = StackNavigator({
Home: { screen: NavigatorWrappingScreen },
Chat: { screen: ChatScreen },
});
```
In this case, the NavigatorWrappingScreen is not a navigator, but it renders a navigator as part of its output.
```js
class NavigatorWrappingScreen extends React.Component {
render() {
return (
<View>
<SomeComponent/>
<MainScreenNavigator/>
</View>
);
}
}
```
To wire `MainScreenNavigator` into the navigation tree, we assign its `router` to the wrapping component. This makes `NavigatorWrappingScreen` "navigation aware", which tells the parent navigator to pass the navigation object down. Since the `NavigatorWrappingScreen`'s `router` is overridden with the child navigator's `router`, the child navigator will receive the needed `navigation`.
```js
class NavigatorWrappingScreen extends React.Component {
render() {
return (
<View>
<SomeComponent/>
<MainScreenNavigator navigation={this.props.navigation}/>
</View>
);
}
}
NavigatorWrappingScreen.router = MainScreenNavigator.router;
```