From 66e713f570e571b7bf9e343837408e8d793b7128 Mon Sep 17 00:00:00 2001 From: aksonov Date: Mon, 10 Jul 2017 15:07:23 +0200 Subject: [PATCH] support more navbar/tabbar params --- Example/Example.js | 40 ++++++++++++++++++++-------------------- dist/Router.js | 35 +++++++++++++++++++++-------------- src/Router.js | 31 +++++++++++++++++++------------ 3 files changed, 60 insertions(+), 46 deletions(-) diff --git a/Example/Example.js b/Example/Example.js index 4cc803cd8..06f92991a 100644 --- a/Example/Example.js +++ b/Example/Example.js @@ -51,8 +51,8 @@ class Example extends Component { return ( - - + + navigation.state.key}/> @@ -113,24 +113,24 @@ class Example extends Component { - - - - - + + + + + diff --git a/dist/Router.js b/dist/Router.js index 9312dc0d2..d03c0eb0b 100644 --- a/dist/Router.js +++ b/dist/Router.js @@ -70,34 +70,41 @@ function getValue(value,params){ return value instanceof Function?value(params):value; } -function createTabBarOptions(_ref){var tabBarStyle=_ref.tabBarStyle,activeTintColor=_ref.activeTintColor,inactiveTintColor=_ref.inactiveTintColor,activeBackgroundColor=_ref.activeBackgroundColor,inactiveBackgroundColor=_ref.inactiveBackgroundColor,showLabel=_ref.showLabel,labelStyle=_ref.labelStyle,tabStyle=_ref.tabStyle; -return{style:tabBarStyle,activeTintColor:activeTintColor,inactiveTintColor:inactiveTintColor,activeBackgroundColor:activeBackgroundColor,inactiveBackgroundColor:inactiveBackgroundColor,showLabel:showLabel,labelStyle:labelStyle,tabStyle:tabStyle}; +function createTabBarOptions(_ref){var tabBarStyle=_ref.tabBarStyle,activeTintColor=_ref.activeTintColor,inactiveTintColor=_ref.inactiveTintColor,activeBackgroundColor=_ref.activeBackgroundColor,inactiveBackgroundColor=_ref.inactiveBackgroundColor,showLabel=_ref.showLabel,labelStyle=_ref.labelStyle,tabStyle=_ref.tabStyle,props=_objectWithoutProperties(_ref,['tabBarStyle','activeTintColor','inactiveTintColor','activeBackgroundColor','inactiveBackgroundColor','showLabel','labelStyle','tabStyle']); +return _extends({},props,{style:tabBarStyle,activeTintColor:activeTintColor,inactiveTintColor:inactiveTintColor,activeBackgroundColor:activeBackgroundColor,inactiveBackgroundColor:inactiveBackgroundColor,showLabel:showLabel,labelStyle:labelStyle,tabStyle:tabStyle}); } function createNavigationOptions(params){var title= -params.title,backButtonImage=params.backButtonImage,navTransparent=params.navTransparent,hideNavBar=params.hideNavBar,hideTabBar=params.hideTabBar,backTitle=params.backTitle,right=params.right,rightButton=params.rightButton,left=params.left,leftButton=params.leftButton,navigationBarStyle=params.navigationBarStyle,headerStyle=params.headerStyle,navBarButtonColor=params.navBarButtonColor,tabBarLabel=params.tabBarLabel,tabBarIcon=params.tabBarIcon,icon=params.icon,getTitle=params.getTitle,headerTitle=params.headerTitle,panHandlers=params.panHandlers,headerTitleStyle=params.headerTitleStyle,titleStyle=params.titleStyle,navBar=params.navBar,onRight=params.onRight,onLeft=params.onLeft,rightButtonImage=params.rightButtonImage,leftButtonImage=params.leftButtonImage,init=params.init,back=params.back; + +params.title,backButtonImage=params.backButtonImage,navTransparent=params.navTransparent,hideNavBar=params.hideNavBar,hideTabBar=params.hideTabBar,backTitle=params.backTitle,right=params.right,rightButton=params.rightButton,left=params.left,leftButton=params.leftButton,navigationBarStyle=params.navigationBarStyle,headerStyle=params.headerStyle,navBarButtonColor=params.navBarButtonColor,tabBarLabel=params.tabBarLabel,tabBarIcon=params.tabBarIcon,icon=params.icon,getTitle=params.getTitle,renderTitle=params.renderTitle,panHandlers=params.panHandlers,navigationBarTitleImage=params.navigationBarTitleImage,navigationBarTitleImageStyle=params.navigationBarTitleImageStyle,headerTitleStyle=params.headerTitleStyle,titleStyle=params.titleStyle,navBar=params.navBar,onRight=params.onRight,onLeft=params.onLeft,rightButtonImage=params.rightButtonImage,leftButtonImage=params.leftButtonImage,init=params.init,back=params.back,props=_objectWithoutProperties(params,['title','backButtonImage','navTransparent','hideNavBar','hideTabBar','backTitle','right','rightButton','left','leftButton','navigationBarStyle','headerStyle','navBarButtonColor','tabBarLabel','tabBarIcon','icon','getTitle','renderTitle','panHandlers','navigationBarTitleImage','navigationBarTitleImageStyle','headerTitleStyle','titleStyle','navBar','onRight','onLeft','rightButtonImage','leftButtonImage','init','back']); var NavBar=navBar; return function(_ref2){var navigation=_ref2.navigation,screenProps=_ref2.screenProps; var navigationParams=navigation.state.params||{}; -var res={ +var res=_extends({}, +props,{ headerTintColor:navBarButtonColor, headerTitleStyle:headerTitleStyle||titleStyle, title:getValue(navigationParams.title||title||getTitle,_extends({navigation:navigation},navigationParams,screenProps)), headerBackTitle:getValue(navigationParams.backTitle||backTitle,_extends({navigation:navigation},navigationParams,screenProps)), headerRight:getValue(navigationParams.right||right||rightButton||params.renderRightButton,_extends({navigation:navigation},navigationParams,screenProps)), headerLeft:getValue(navigationParams.left||left||leftButton||params.renderLeftButton,_extends({navigation:navigation},navigationParams,screenProps)), +headerTitle:getValue(navigationParams.renderTitle||renderTitle||params.renderTitle,_extends({navigation:navigation},navigationParams,screenProps)), headerStyle:getValue(navigationParams.headerStyle||headerStyle||navigationBarStyle,_extends({navigation:navigation},navigationParams,screenProps)), -headerBackImage:navigationParams.backButtonImage||backButtonImage}; +headerBackImage:navigationParams.backButtonImage||backButtonImage}); if(NavBar){ -res.header=function(props){return _react2.default.createElement(NavBar,_extends({navigation:navigation},params,{__source:{fileName:_jsxFileName,lineNumber:94}}));}; +res.header=function(data){return _react2.default.createElement(NavBar,_extends({navigation:navigation},data,params,{__source:{fileName:_jsxFileName,lineNumber:97}}));}; } if(panHandlers===null){ res.gesturesEnabled=false; } +if(navigationBarTitleImage){ +res.headerTitle=_react2.default.createElement(_reactNative.Image,{source:navigationBarTitleImage,style:navigationBarTitleImageStyle,__source:{fileName:_jsxFileName,lineNumber:105}}); +} + if(tabBarLabel){ res.tabBarLabel=tabBarLabel; } @@ -139,7 +146,7 @@ if(!Component){ return null; } return(0,_native.observer)(function(_ref3){var navigation=_ref3.navigation,props=_objectWithoutProperties(_ref3,['navigation']); -return _react2.default.createElement(Component,_extends({},props,{navigation:navigation},navigation.state.params,{name:navigation.state.routeName,__source:{fileName:_jsxFileName,lineNumber:142}})); +return _react2.default.createElement(Component,_extends({},props,{navigation:navigation},navigation.state.params,{name:navigation.state.routeName,__source:{fileName:_jsxFileName,lineNumber:149}})); }); } @@ -149,7 +156,7 @@ var AppNavigator=props.navigator; return( _react2.default.createElement(AppNavigator,{navigation:(0,_reactNavigation.addNavigationHelpers)({ dispatch:_navigationStore2.default.dispatch, -state:_navigationStore2.default.state}),__source:{fileName:_jsxFileName,lineNumber:150}})); +state:_navigationStore2.default.state}),__source:{fileName:_jsxFileName,lineNumber:157}})); }); @@ -161,7 +168,7 @@ return; } var res={}; var order=[];var _scene$props= -scene.props,tabs=_scene$props.tabs,modal=_scene$props.modal,lightbox=_scene$props.lightbox,navigator=_scene$props.navigator,wrap=_scene$props.wrap,drawerWidth=_scene$props.drawerWidth,drawerPosition=_scene$props.drawerPosition,contentOptions=_scene$props.contentOptions,contentComponent=_scene$props.contentComponent,lazy=_scene$props.lazy,drawer=_scene$props.drawer,parentProps=_objectWithoutProperties(_scene$props,['tabs','modal','lightbox','navigator','wrap','drawerWidth','drawerPosition','contentOptions','contentComponent','lazy','drawer']); +scene.props,tabs=_scene$props.tabs,modal=_scene$props.modal,lightbox=_scene$props.lightbox,navigator=_scene$props.navigator,wrap=_scene$props.wrap,contentComponent=_scene$props.contentComponent,lazy=_scene$props.lazy,drawer=_scene$props.drawer,parentProps=_objectWithoutProperties(_scene$props,['tabs','modal','lightbox','navigator','wrap','contentComponent','lazy','drawer']); var commonProps=_extends({},parentProps,inheritProps); @@ -172,7 +179,7 @@ delete commonProps[pkey]; } if(drawer&&!commonProps.left&&!commonProps.leftButtonImage&&!commonProps.leftTitle&&!commonProps.back){ -commonProps.leftButtonImage=_menu_burger2.default; +commonProps.leftButtonImage=commonProps.drawerImage||_menu_burger2.default; commonProps.onLeft=_navigationStore2.default.drawerOpen; } @@ -249,14 +256,14 @@ var mode=modal?'modal':'card'; if(lightbox){ return(0,_LightboxNavigator2.default)(res,{mode:mode,initialRouteParams:initialRouteParams,initialRouteName:initialRouteName,navigationOptions:createNavigationOptions(parentProps)}); }else if(tabs){ -return(0,_reactNavigation.TabNavigator)(res,{lazy:lazy,initialRouteName:initialRouteName,initialRouteParams:initialRouteParams,order:order,tabBarOptions:createTabBarOptions(parentProps),navigationOptions:createNavigationOptions(parentProps)}); +return(0,_reactNavigation.TabNavigator)(res,_extends({lazy:lazy,initialRouteName:initialRouteName,initialRouteParams:initialRouteParams,order:order},parentProps,{tabBarOptions:createTabBarOptions(parentProps),navigationOptions:createNavigationOptions(parentProps)})); }else if(drawer){ -return(0,_reactNavigation.DrawerNavigator)(res,{initialRouteName:initialRouteName,contentComponent:contentComponent,order:order,backBehavior:'none'}); +return(0,_reactNavigation.DrawerNavigator)(res,_extends({initialRouteName:initialRouteName,contentComponent:contentComponent,order:order,backBehavior:'none'},parentProps)); }else{ if(navigator){ return navigator(res,_extends({lazy:lazy,initialRouteName:initialRouteName,initialRouteParams:initialRouteParams,order:order},parentProps,{navigationOptions:createNavigationOptions(parentProps)})); }else{ -return(0,_reactNavigation.StackNavigator)(res,{mode:mode,initialRouteParams:initialRouteParams,initialRouteName:initialRouteName,navigationOptions:createNavigationOptions(parentProps)}); +return(0,_reactNavigation.StackNavigator)(res,_extends({mode:mode,initialRouteParams:initialRouteParams,initialRouteName:initialRouteName},parentProps,{navigationOptions:createNavigationOptions(parentProps)})); } } }exports.default= @@ -267,5 +274,5 @@ var AppNavigator=processScene(scene,props); _navigationStore2.default.router=AppNavigator.router; _navigationStore2.default.reducer=createReducer&&createReducer(props); -return _react2.default.createElement(App,{navigator:AppNavigator,__source:{fileName:_jsxFileName,lineNumber:270}}); +return _react2.default.createElement(App,{navigator:AppNavigator,__source:{fileName:_jsxFileName,lineNumber:277}}); }; \ No newline at end of file diff --git a/src/Router.js b/src/Router.js index af4b7c262..76a585e63 100644 --- a/src/Router.js +++ b/src/Router.js @@ -1,7 +1,7 @@ import React from 'react'; import {observable, autorun, computed, toJS} from 'mobx'; import {observer} from 'mobx-react/native'; -import {View} from 'react-native'; +import {View, Image} from 'react-native'; import navigationStore from './navigationStore'; import Scene from './Scene'; import {OnEnter, OnExit,assert } from './Util'; @@ -70,34 +70,41 @@ function getValue(value, params) { return value instanceof Function ? value(params) : value; } -function createTabBarOptions({tabBarStyle, activeTintColor, inactiveTintColor, activeBackgroundColor, inactiveBackgroundColor, showLabel, labelStyle, tabStyle}) { - return {style:tabBarStyle, activeTintColor, inactiveTintColor, activeBackgroundColor, inactiveBackgroundColor, showLabel, labelStyle, tabStyle}; +function createTabBarOptions({tabBarStyle, activeTintColor, inactiveTintColor, activeBackgroundColor, inactiveBackgroundColor, showLabel, labelStyle, tabStyle, ...props}) { + return {...props, style:tabBarStyle, activeTintColor, inactiveTintColor, activeBackgroundColor, inactiveBackgroundColor, showLabel, labelStyle, tabStyle}; } function createNavigationOptions(params) { const {title, backButtonImage, navTransparent, hideNavBar, hideTabBar, backTitle, right, rightButton, left, leftButton, - navigationBarStyle, headerStyle, navBarButtonColor, tabBarLabel, tabBarIcon, icon, getTitle, headerTitle, panHandlers, - headerTitleStyle, titleStyle, navBar, onRight, onLeft, rightButtonImage, leftButtonImage, init, back} = params; + navigationBarStyle, headerStyle, navBarButtonColor, tabBarLabel, tabBarIcon, icon, getTitle, renderTitle, panHandlers, + navigationBarTitleImage, navigationBarTitleImageStyle, + headerTitleStyle, titleStyle, navBar, onRight, onLeft, rightButtonImage, leftButtonImage, init, back, ...props} = params; let NavBar = navBar; return ({navigation, screenProps}) => { const navigationParams = navigation.state.params || {}; const res = { + ...props, headerTintColor: navBarButtonColor, - headerTitleStyle : headerTitleStyle || titleStyle, + headerTitleStyle: headerTitleStyle || titleStyle, title: getValue((navigationParams.title) || title || getTitle, {navigation, ...navigationParams, ...screenProps}), headerBackTitle: getValue((navigationParams.backTitle) || backTitle, {navigation, ...navigationParams, ...screenProps}), headerRight: getValue((navigationParams.right) || right || rightButton || params.renderRightButton, {navigation, ...navigationParams, ...screenProps}), headerLeft: getValue((navigationParams.left) || left || leftButton || params.renderLeftButton, {navigation, ...navigationParams, ...screenProps}), + headerTitle: getValue((navigationParams.renderTitle) || renderTitle || params.renderTitle, { navigation, ...navigationParams, ...screenProps }), headerStyle: getValue((navigationParams.headerStyle || headerStyle || navigationBarStyle), {navigation, ...navigationParams, ...screenProps}), headerBackImage: navigationParams.backButtonImage || backButtonImage, }; if (NavBar) { - res.header = (props) => + res.header = (data) => ; } if (panHandlers === null) { res.gesturesEnabled = false; } + if (navigationBarTitleImage) { + res.headerTitle = ; + } + if (tabBarLabel) { res.tabBarLabel = tabBarLabel; } @@ -161,7 +168,7 @@ function processScene(scene: Scene, inheritProps = {}, clones = []) { } const res = {}; const order = []; - const {tabs, modal, lightbox, navigator, wrap, drawerWidth, drawerPosition, contentOptions, contentComponent, lazy, drawer, ...parentProps} = scene.props; + const {tabs, modal, lightbox, navigator, wrap, contentComponent, lazy, drawer, ...parentProps} = scene.props; const commonProps = { ...parentProps, ...inheritProps}; // add inherit props @@ -172,7 +179,7 @@ function processScene(scene: Scene, inheritProps = {}, clones = []) { } if (drawer && !commonProps.left && !commonProps.leftButtonImage && !commonProps.leftTitle && !commonProps.back) { - commonProps.leftButtonImage = _drawerImage; + commonProps.leftButtonImage = commonProps.drawerImage || _drawerImage; commonProps.onLeft = navigationStore.drawerOpen; } @@ -249,14 +256,14 @@ function processScene(scene: Scene, inheritProps = {}, clones = []) { if (lightbox) { return LightboxNavigator(res, { mode, initialRouteParams, initialRouteName, navigationOptions: createNavigationOptions(parentProps) }); } else if (tabs) { - return TabNavigator(res, {lazy, initialRouteName, initialRouteParams, order, tabBarOptions:createTabBarOptions(parentProps), navigationOptions: createNavigationOptions(parentProps) }); + return TabNavigator(res, {lazy, initialRouteName, initialRouteParams, order, ...parentProps, tabBarOptions:createTabBarOptions(parentProps), navigationOptions: createNavigationOptions(parentProps) }); } else if (drawer) { - return DrawerNavigator(res, {initialRouteName, contentComponent, order, backBehavior:'none'}); + return DrawerNavigator(res, {initialRouteName, contentComponent, order, backBehavior:'none', ...parentProps}); } else { if (navigator){ return navigator(res, {lazy, initialRouteName, initialRouteParams, order, ...parentProps, navigationOptions: createNavigationOptions(parentProps) }); } else { - return StackNavigator(res, { mode, initialRouteParams, initialRouteName, navigationOptions: createNavigationOptions(parentProps) }); + return StackNavigator(res, { mode, initialRouteParams, initialRouteName, ...parentProps, navigationOptions: createNavigationOptions(parentProps) }); } } }