Skip to content

Commit

Permalink
support more navbar/tabbar params
Browse files Browse the repository at this point in the history
  • Loading branch information
aksonov committed Jul 10, 2017
1 parent aefcb36 commit 66e713f
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 46 deletions.
40 changes: 20 additions & 20 deletions Example/Example.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,8 @@ class Example extends Component {
return (
<Router createReducer={reducerCreate}>
<Scene key="lightbox" lightbox>
<Scene key="drawer" drawer contentComponent={TabView}>
<Scene key="modal" modal hideNavBar>
<Scene key="modal" modal hideNavBar>
<Scene key="drawer" drawer contentComponent={TabView} >
<Scene key="root" hideNavBar hideTabBar>
<Scene key="echo" back clone component={EchoView} getTitle={({navigation}) => navigation.state.key}/>
<Scene key="register" back>
Expand Down Expand Up @@ -113,24 +113,24 @@ class Example extends Component {
<Scene key="tab5" component={TabView} title="Tab #5" icon={TabIcon}/>
</Scene>
</Scene>
<Scene key="login">
<Scene key="loginModal" component={Login} title="Login" leftTitle="Cancel" onLeft={Actions.pop}/>
<Scene
key="loginModal2"
component={Login2}
title="Login2"
panHandlers={null}
duration={1}
/>
<Scene
key="loginModal3"
hideNavBar
component={Login3}
title="Login3"
panHandlers={null}
duration={1}
/>
</Scene>
</Scene>
<Scene key="login">
<Scene key="loginModal" component={Login} title="Login" leftTitle="Cancel" onLeft={Actions.pop}/>
<Scene
key="loginModal2"
component={Login2}
title="Login2"
panHandlers={null}
duration={1}
/>
<Scene
key="loginModal3"
hideNavBar
component={Login3}
title="Login3"
panHandlers={null}
duration={1}
/>
</Scene>
</Scene>
<Scene key="error" component={Error}/>
Expand Down
35 changes: 21 additions & 14 deletions dist/Router.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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}}));
});
}

Expand All @@ -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}}));


});
Expand All @@ -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);

Expand All @@ -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;
}

Expand Down Expand Up @@ -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=
Expand All @@ -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}});
};
31 changes: 19 additions & 12 deletions src/Router.js
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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) => <NavBar navigation={navigation} {...params} />
res.header = (data) => <NavBar navigation={navigation} {...data} {...params} />;
}

if (panHandlers === null) {
res.gesturesEnabled = false;
}

if (navigationBarTitleImage) {
res.headerTitle = <Image source={navigationBarTitleImage} style={navigationBarTitleImageStyle} />;
}

if (tabBarLabel) {
res.tabBarLabel = tabBarLabel;
}
Expand Down Expand Up @@ -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
Expand All @@ -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;
}

Expand Down Expand Up @@ -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) });
}
}
}
Expand Down

0 comments on commit 66e713f

Please sign in to comment.