diff --git a/src/ExNavigationReducer.js b/src/ExNavigationReducer.js index e6be535..de20786 100644 --- a/src/ExNavigationReducer.js +++ b/src/ExNavigationReducer.js @@ -239,9 +239,13 @@ class ExNavigationReducer { const defaultRouteConfig = navigatorState.defaultRouteConfig; const newChildren = routes.map(child => { - const newChild = child.clone(); - newChild.config = _.merge({}, defaultRouteConfig, child.config); - return newChild; + if (child.clone) { + const newChild = child.clone(); + newChild.config = _.merge({}, defaultRouteConfig, child.config); + return newChild; + } else { + return child; + } }); return { diff --git a/src/sliding-tab/ExNavigationSlidingTab.js b/src/sliding-tab/ExNavigationSlidingTab.js index 3218788..daba4d8 100644 --- a/src/sliding-tab/ExNavigationSlidingTab.js +++ b/src/sliding-tab/ExNavigationSlidingTab.js @@ -55,6 +55,7 @@ type Props = { renderFooter?: (props: any) => ?React.Element, renderLabel?: (routeParams: any) => ?React.Element, getRenderLabel?: (props: any) => (routeParams: any) => ?React.Element, + tabBarScrollEnabled?: boolean, style?: any, swipeEnabled?: boolean, tabBarStyle?: any, @@ -87,6 +88,7 @@ class ExNavigationSlidingTab extends PureComponent { indicatorStyle: {}, position: 'top', pressColor: 'rgba(0,0,0,0.2)', + tabBarScrollEnabled: false, tabStyle: {}, renderBefore: () => null, }; @@ -119,12 +121,9 @@ class ExNavigationSlidingTab extends PureComponent { } componentWillMount() { - let tabItems = this._parseTabItems(this.props); - this._registerNavigatorContext(); - let routes = tabItems.map(({ id, title }) => ({ title, key: id })); - let routeKeys = routes.map(r => r.key); + const { routes, routeKeys } = this._parseRoutes(this._parseTabItems(this.props)); this.props.navigation.dispatch(Actions.setCurrentNavigator( this.state.navigatorUID, @@ -142,10 +141,16 @@ class ExNavigationSlidingTab extends PureComponent { } componentWillReceiveProps(nextProps) { - // TODO: Should make it possible to dynamically add children after initial render? - // if (nextProps.children && nextProps.children !== this.props.children) { - // this._parseTabItems(nextProps); - // } + if (nextProps.children && nextProps.children !== this.props.children) { + const { routes, routeKeys } = this._parseRoutes(this._parseTabItems(nextProps)); + const navigationState = nextProps.navigationState; + const currentTabKey = (navigationState && navigationState.routes[navigationState.index].key) || nextProps.initialTab; + nextProps.navigation.dispatch(Actions.immediatelyResetStack( + this.state.navigatorUID, + routes, + routeKeys.indexOf(currentTabKey), + )); + } } componentDidUpdate(prevProps) { @@ -167,7 +172,6 @@ class ExNavigationSlidingTab extends PureComponent { } } - render() { if (!this.props.children || !this.state.tabItems) { return null; @@ -226,6 +230,7 @@ class ExNavigationSlidingTab extends PureComponent { tabStyle: this.props.tabStyle, labelStyle: this.props.labelStyle, renderLabel: renderLabelFn, + scrollEnabled: this.props.tabBarScrollEnabled, style: [{backgroundColor: this.props.barBackgroundColor}, this.props.tabBarStyle], }; @@ -283,6 +288,16 @@ class ExNavigationSlidingTab extends PureComponent { return tabItems; } + _parseRoutes(tabItems) { + const routeKeys = []; + const routes = tabItems.map(({ id, title }) => { + routeKeys.push(id); + return { title, key: id }; + }); + + return { routes, routeKeys }; + } + _setActiveTab = (i) => { let tabItem = this.state.tabItems[i]; let key = tabItem.id;