Pass through screenProps to nested navigators

This changes the behaviour of screenProps so that the props no longer get splatted.
Components will receive this as `this.props.screenProps`.
This commit is contained in:
William Schurman 2017-02-09 00:30:09 +05:30 committed by Satyajit Sahoo
parent 797833a69a
commit b9bc386a4b
4 changed files with 28 additions and 6 deletions

View File

@ -130,6 +130,6 @@ The navigator component created by `DrawerNavigator(...)` takes the following pr
});
<DrawerNav
screenProps={/* these will get passed to the screen components */}
screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>
```

View File

@ -139,7 +139,7 @@ The navigator component created by `StackNavigator(...)` takes the following pro
});
<SomeStack
screenProps={/* these will get passed to the screen components */}
screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>
```

View File

@ -162,7 +162,7 @@ The navigator component created by `TabNavigator(...)` takes the following props
});
<TabNav
screenProps={/* these will get passed to the screen components */}
screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>
```

View File

@ -11,12 +11,12 @@ import type {
type Props = {
screenProps?: {};
hideScreenPropsWarning?: boolean;
navigation: NavigationScreenProp<NavigationState, NavigationAction>;
component: ReactClass<*>;
};
export default class SceneView extends PureComponent<void, Props, void> {
static childContextTypes = {
navigation: React.PropTypes.object.isRequired,
};
@ -29,8 +29,30 @@ export default class SceneView extends PureComponent<void, Props, void> {
};
}
componentWillMount() {
if (this.props.screenProps !== undefined && !this.props.hideScreenPropsWarning) {
console.warn(
'Behaviour of screenProps has changed from initial beta. ' +
'Components will now receive it as `this.props.screenProps` instead.\n' +
'Pass `hideScreenPropsWarning` to hide this warning.'
);
}
}
render() {
const { screenProps, navigation, component: Component } = this.props;
return <Component {...screenProps} navigation={navigation} />;
const {
hideScreenPropsWarning,
screenProps,
navigation,
component: Component,
} = this.props;
return (
<Component
hideScreenPropsWarning={hideScreenPropsWarning}
screenProps={screenProps}
navigation={navigation}
/>
);
}
}