mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-04-28 20:25:33 +08:00
[Navigator]: Allow developer to observe the focus change events from the owner or the children
of the navigator component.
Summary:
Per offline discussion with @evv, we'd like to deprecate the `onDidFocus` and `onWillFocus`
API that makes it really hard for the descendent children of a navigator to observe its focus
change events.
@public
Since for now the descendent children do have access to the navigator via `this.props.navigator`,
this diff makes it easy to observe the focus change event by doing:
```
this.props.navigator.addListener('willfocus', this._onFocus);
```
The goal is to make the event system in navigator more useful and maintainable.
Test Plan:
Test Video: https://www.facebook.com/pxlcld/mrzS
1. jest: ./Libraries/FBReactKit/js/runTests.js NavigationEventEmitter
2. Load UI Explorer: <Navigator />, see console logs that shows the focus change events fires.
This commit is contained in:
@@ -132,6 +132,7 @@ var TabBarExample = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<Navigator
|
||||
ref={this._setNavigatorRef}
|
||||
style={styles.container}
|
||||
initialRoute={{ message: "First Scene", }}
|
||||
renderScene={this.renderScene}
|
||||
@@ -145,6 +146,34 @@ var TabBarExample = React.createClass({
|
||||
);
|
||||
},
|
||||
|
||||
|
||||
componentWillUnmount: function() {
|
||||
this._listeners && this._listeners.forEach(listener => listener.remove());
|
||||
},
|
||||
|
||||
_setNavigatorRef: function(navigator) {
|
||||
if (navigator !== this._navigator) {
|
||||
this._navigator = navigator;
|
||||
|
||||
if (navigator) {
|
||||
var callback = (event) => {
|
||||
console.log(
|
||||
`TabBarExample: event ${event.type}`,
|
||||
{
|
||||
route: JSON.stringify(event.data.route),
|
||||
target: event.target,
|
||||
type: event.type,
|
||||
}
|
||||
);
|
||||
};
|
||||
// Observe focus change events from the owner.
|
||||
this._listeners = [
|
||||
navigator.navigationContext.addListener('willfocus', callback),
|
||||
navigator.navigationContext.addListener('didfocus', callback),
|
||||
];
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
|
||||
Reference in New Issue
Block a user