kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-05-05 07:07:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ReactNative] Remove dependencies on Navigator idStack

Browse Source 
Summary:
idStack is going away soon. This removes all references to it. Looking at the internal state of navigator will make you have a bad time.

The biggest change is switching to the new component-freezing techinique in the navigation bars. This way we avoid dependence on the idStack to provide a scalar ID for each route.
This commit is contained in:
Eric Vicenti
2015-07-17 15:20:04 -07:00
parent c4389c006f
commit c28d33f3a2
2 changed files with 87 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
Libraries/CustomComponents/Navigator/NavigatorNavigationBar.js
View File

@@ -32,6 +32,8 @@ var StaticContainer = require('StaticContainer.react');
var StyleSheet = require('StyleSheet');
var View = require('View');
var { Map } = require('immutable');
var COMPONENT_NAMES = ['Title', 'LeftButton', 'RightButton'];
var navStatePresentedIndex = function(navState) {
@@ -53,7 +55,6 @@ var NavigatorNavigationBar = React.createClass({
}),
navState: React.PropTypes.shape({
routeStack: React.PropTypes.arrayOf(React.PropTypes.object),
idStack: React.PropTypes.arrayOf(React.PropTypes.number),
presentedIndex: React.PropTypes.number,
}),
style: View.propTypes.style,
@@ -63,6 +64,16 @@ var NavigatorNavigationBar = React.createClass({
Styles: NavigatorNavigationBarStyles,
},
componentWillMount: function() {
this._components = {};
this._descriptors = {};
COMPONENT_NAMES.forEach(componentName => {
this._components[componentName] = new Map();
this._descriptors[componentName] = new Map();
});
},
_getReusableProps: function(
/*string*/componentName,
/*number*/index
@@ -104,7 +115,7 @@ var NavigatorNavigationBar = React.createClass({
}
COMPONENT_NAMES.forEach(function (componentName) {
var component = this.refs[componentName + index];
var component = this._components[componentName].get(this.props.navState.routeStack[index]);
var props = this._getReusableProps(componentName, index);
if (component && interpolate[componentName](props.style, amount)) {
component.setNativeProps(props);
@@ -128,7 +139,7 @@ var NavigatorNavigationBar = React.createClass({
var navState = this.props.navState;
var components = COMPONENT_NAMES.map(function (componentName) {
return navState.routeStack.map(
this._renderOrReturnComponent.bind(this, componentName)
this._getComponent.bind(this, componentName)
);
}, this);
@@ -139,28 +150,19 @@ var NavigatorNavigationBar = React.createClass({
);
},
_renderOrReturnComponent: function(
_getComponent: function(
/*string*/componentName,
/*object*/route,
/*number*/index
) /*object*/ {
var navState = this.props.navState;
var uid = navState.idStack[index];
var containerRef = componentName + 'Container' + uid;
var alreadyRendered = this.refs[containerRef];
if (alreadyRendered) {
// Don't bother re-calculating the children
return (
<StaticContainer
ref={containerRef}
key={containerRef}
shouldUpdate={false}
/>
);
) /*?Object*/ {
if (this._descriptors[componentName].includes(route)) {
return this._descriptors[componentName].get(route);
}
var rendered = null;
var content = this.props.routeMapper[componentName](
navState.routeStack[index],
this.props.navState.routeStack[index],
this.props.navigator,
index,
this.props.navState
@@ -171,16 +173,18 @@ var NavigatorNavigationBar = React.createClass({
var initialStage = index === navStatePresentedIndex(this.props.navState) ?
NavigatorNavigationBarStyles.Stages.Center : NavigatorNavigationBarStyles.Stages.Left;
return (
<StaticContainer
ref={containerRef}
key={containerRef}
shouldUpdate={false}>
<View ref={componentName + index} style={initialStage[componentName]}>
{content}
</View>
</StaticContainer>
rendered = (
<View
ref={(ref) => {
this._components[componentName] = this._components[componentName].set(route, ref);
}}
style={initialStage[componentName]}>
{content}
</View>
);
this._descriptors[componentName] = this._descriptors[componentName].set(route, rendered);
return rendered;
},
});