Ignore Navigator touch events for background buttons

Summary:Currently, if the Navigator with the default `NavigatorNavigationBar` has two scenes on its `routeStack` and the bottom one defines a `RightButton` but the top one doesn't, a touch to the location of the underlying  `RightButton` will trigger its action.

This fix checks if the button's opacity is set to 0 (indicating it has been transitioned off the scene and shouldn't be interacted with) and ignores touch events if so.
Closes https://github.com/facebook/react-native/pull/5624

Differential Revision: D3139553

fb-gh-sync-id: 6d6da1459e289499b6d8769120a3b6114548c090
fbshipit-source-id: 6d6da1459e289499b6d8769120a3b6114548c090
This commit is contained in:
Kyle Corbitt 2016-04-05 11:32:15 -07:00 committed by Facebook Github Bot 1
parent 05a852a664
commit bafc506f7c
1 changed files with 4 additions and 2 deletions

View File

@ -145,6 +145,7 @@ var NavigatorNavigationBar = React.createClass({
var component = this._components[componentName].get(this.props.navState.routeStack[index]);
var props = this._getReusableProps(componentName, index);
if (component && interpolate[componentName](props.style, amount)) {
props.pointerEvents = props.style.opacity === 0 ? 'none' : 'box-none';
component.setNativeProps(props);
}
}, this);
@ -203,7 +204,8 @@ var NavigatorNavigationBar = React.createClass({
return null;
}
var initialStage = index === navStatePresentedIndex(this.props.navState) ?
var componentIsActive = index === navStatePresentedIndex(this.props.navState);
var initialStage = componentIsActive ?
this.props.navigationStyles.Stages.Center :
this.props.navigationStyles.Stages.Left;
rendered = (
@ -211,7 +213,7 @@ var NavigatorNavigationBar = React.createClass({
ref={(ref) => {
this._components[componentName] = this._components[componentName].set(route, ref);
}}
pointerEvents="box-none"
pointerEvents={componentIsActive ? 'box-none' : 'none'}
style={initialStage[componentName]}>
{content}
</View>