mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-04-29 21:05:29 +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
|
```phone-example
|
||||||
nested
|
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