mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-02-11 22:33:32 +08:00
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:
@@ -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;
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user