Skip to content

Commit 24665a7

Browse files
author
aksonov
committed
Fixes #2263 
1 parent 8cd5252 commit 24665a7

File tree

3 files changed

+28
-15
lines changed

3 files changed

+28
-15
lines changed

‎Example/Example.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,8 @@ const Example = () => (
7171
</Scene>
7272
<Scene key="launch" component={Launch} title="Launch" initial />
7373
<Drawer contentComponent={TabView}>
74-
<Tabs key="tabbar" gestureEnabled={false} showLabel={false} tabs tabBarStyle={styles.tabBarStyle} activeBackgroundColor="#ddd">
74+
<Tabs key="tabbar" gestureEnabled={false} showLabel={false} tabs tabBarStyle={styles.tabBarStyle} activeBackgroundColor="white"
75+
inactiveBackgroundColor="red">
7576
<Stack
7677
key="tab1"
7778
title="Tab #1"

‎dist/navigationStore.js‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,8 @@ var reservedKeys=[
7171

7272
var dontInheritKeys=[
7373
'component',
74+
'contentComponent',
75+
'tabBarComponent',
7476
'modal',
7577
'drawer',
7678
'tabs',
@@ -129,15 +131,15 @@ headerStyle:getValue(navigationParams.headerStyle||headerStyle||navigationBarSty
129131
headerBackImage:navigationParams.backButtonImage||backButtonImage});
130132

131133
if(NavBar){
132-
res.header=function(data){return _react2.default.createElement(NavBar,_extends({navigation:navigation},state,data,{__source:{fileName:_jsxFileName,lineNumber:132}}));};
134+
res.header=function(data){return _react2.default.createElement(NavBar,_extends({navigation:navigation},state,data,{__source:{fileName:_jsxFileName,lineNumber:134}}));};
133135
}
134136

135137
if(panHandlers===null){
136138
res.gesturesEnabled=false;
137139
}
138140

139141
if(navigationBarTitleImage){
140-
res.headerTitle=_react2.default.createElement(_reactNative.Image,{source:navigationBarTitleImage,style:navigationBarTitleImageStyle,__source:{fileName:_jsxFileName,lineNumber:140}});
142+
res.headerTitle=_react2.default.createElement(_reactNative.Image,{source:navigationBarTitleImage,style:navigationBarTitleImageStyle,__source:{fileName:_jsxFileName,lineNumber:142}});
141143
}
142144

143145
if(tabBarLabel){
@@ -146,7 +148,7 @@ res.tabBarLabel=tabBarLabel;
146148

147149
if(tabBarIcon||icon){
148150
var Icon=tabBarIcon||icon;
149-
res.tabBarIcon=function(data){return _react2.default.createElement(Icon,_extends({},state,data,{__source:{fileName:_jsxFileName,lineNumber:149}}));};
151+
res.tabBarIcon=function(data){return _react2.default.createElement(Icon,_extends({},state,data,{__source:{fileName:_jsxFileName,lineNumber:151}}));};
150152
}
151153
var componentData={};
152154

@@ -164,20 +166,20 @@ if(rightButtonImage||rightTitle||params.renderRightButton||onRight||navigationPa
164166
navigationParams.rightTitle||navigationParams.rightButtonImage||rightButtonTextStyle||
165167
(drawerImage||drawerIcon)&&drawerPosition==='right'){
166168
res.headerRight=getValue(navigationParams.right||navigationParams.rightButton||params.renderRightButton,_extends({},
167-
navigationParams,screenProps))||_react2.default.createElement(RightNavBarButton,_extends({},params,navigationParams,componentData,{__source:{fileName:_jsxFileName,lineNumber:167}}));
169+
navigationParams,screenProps))||_react2.default.createElement(RightNavBarButton,_extends({},params,navigationParams,componentData,{__source:{fileName:_jsxFileName,lineNumber:169}}));
168170
}
169171

170172
if(leftButtonImage||backButtonImage||backTitle||leftTitle||params.renderLeftButton||leftButtonTextStyle||
171173
backButtonTextStyle||onLeft||navigationParams.leftTitle||navigationParams.onLeft||navigationParams.leftButtonImage||
172174
navigationParams.backButtonImage||navigationParams.backTitle||(drawerImage||drawerIcon)&&drawerPosition!=='right'){
173175
res.headerLeft=getValue(navigationParams.left||navigationParams.leftButton||params.renderLeftButton,_extends({},params,navigationParams,screenProps))||
174176
(onLeft&&(leftTitle||navigationParams.leftTitle||leftButtonImage||navigationParams.leftButtonImage)||drawerImage||drawerIcon)&&
175-
_react2.default.createElement(LeftNavBarButton,_extends({},params,navigationParams,componentData,{__source:{fileName:_jsxFileName,lineNumber:175}}))||(
176-
init?null:renderBackButton&&renderBackButton(state)||_react2.default.createElement(BackNavBarButton,_extends({},state,{__source:{fileName:_jsxFileName,lineNumber:176}})));
177+
_react2.default.createElement(LeftNavBarButton,_extends({},params,navigationParams,componentData,{__source:{fileName:_jsxFileName,lineNumber:177}}))||(
178+
init?null:renderBackButton&&renderBackButton(state)||_react2.default.createElement(BackNavBarButton,_extends({},state,{__source:{fileName:_jsxFileName,lineNumber:178}})));
177179
}
178180

179181
if(back){
180-
res.headerLeft=renderBackButton&&renderBackButton(state)||_react2.default.createElement(BackNavBarButton,_extends({},state,{__source:{fileName:_jsxFileName,lineNumber:180}}));
182+
res.headerLeft=renderBackButton&&renderBackButton(state)||_react2.default.createElement(BackNavBarButton,_extends({},state,{__source:{fileName:_jsxFileName,lineNumber:182}}));
181183
}
182184

183185
if(hideTabBar){
@@ -227,15 +229,15 @@ store.deleteRef(originalRouteName(navigation.state.routeName));
227229
}},{key:'render',value:function render()
228230
{var _this2=this;
229231
var navigation=this.props.navigation;
230-
return _react2.default.createElement(Component,_extends({ref:function ref(_ref4){return _this2.ref=_ref4;}},this.props,navigation.state.params,{name:navigation.state.routeName,__source:{fileName:_jsxFileName,lineNumber:230}}));
232+
return _react2.default.createElement(Component,_extends({ref:function ref(_ref4){return _this2.ref=_ref4;}},this.props,navigation.state.params,{name:navigation.state.routeName,__source:{fileName:_jsxFileName,lineNumber:232}}));
231233
}}]);return Wrapped;}(_react2.default.Component),_class.propTypes={navigation:_propTypes2.default.object},_temp);
232234

233235
return wrapper(Wrapped);
234236
}
235237

236238

237239
function StatelessWrapped(_ref5){var navigation=_ref5.navigation,props=_objectWithoutProperties(_ref5,['navigation']);
238-
return _react2.default.createElement(Component,_extends({},props,{navigation:navigation},navigation.state.params,{name:navigation.state.routeName,__source:{fileName:_jsxFileName,lineNumber:238}}));
240+
return _react2.default.createElement(Component,_extends({},props,{navigation:navigation},navigation.state.params,{name:navigation.state.routeName,__source:{fileName:_jsxFileName,lineNumber:240}}));
239241
}
240242
StatelessWrapped.propTypes={
241243
navigation:_propTypes2.default.object};
@@ -312,8 +314,8 @@ return null;
312314
}
313315
var res={};
314316
var order=[];var _scene$props=
315-
scene.props,navigator=_scene$props.navigator,contentComponent=_scene$props.contentComponent,lazy=_scene$props.lazy,duration=_scene$props.duration,parentProps=_objectWithoutProperties(_scene$props,['navigator','contentComponent','lazy','duration']);var
316-
tabs=parentProps.tabs,modal=parentProps.modal,lightbox=parentProps.lightbox,drawer=parentProps.drawer,transitionConfig=parentProps.transitionConfig;
317+
scene.props,navigator=_scene$props.navigator,contentComponent=_scene$props.contentComponent,tabBarPosition=_scene$props.tabBarPosition,lazy=_scene$props.lazy,duration=_scene$props.duration,parentProps=_objectWithoutProperties(_scene$props,['navigator','contentComponent','tabBarPosition','lazy','duration']);var
318+
tabs=parentProps.tabs,modal=parentProps.modal,lightbox=parentProps.lightbox,drawer=parentProps.drawer,tabBarComponent=parentProps.tabBarComponent,transitionConfig=parentProps.transitionConfig;
317319
if(scene.type===_Modal2.default){
318320
modal=true;
319321
}else if(scene.type===_Drawer2.default){
@@ -424,6 +426,10 @@ return navigator(res,_extends({lazy:lazy,initialRouteName:initialRouteName,initi
424426
if(lightbox){
425427
return(0,_LightboxNavigator2.default)(res,_extends({mode:mode,initialRouteParams:initialRouteParams,initialRouteName:initialRouteName},commonProps,{navigationOptions:createNavigationOptions(commonProps)}));
426428
}else if(tabs){
429+
if(!tabBarComponent){
430+
tabBarComponent=tabBarPosition==='top'?function(props){return _react2.default.createElement(_reactNavigation.TabBarTop,_extends({},props,commonProps,{__source:{fileName:_jsxFileName,lineNumber:430}}));}:
431+
function(props){return _react2.default.createElement(_reactNavigation.TabBarBottom,_extends({},props,commonProps,{__source:{fileName:_jsxFileName,lineNumber:431}}));};
432+
}
427433
return(0,_reactNavigation.TabNavigator)(res,_extends({lazy:lazy,initialRouteName:initialRouteName,initialRouteParams:initialRouteParams,order:order},commonProps,{
428434
tabBarOptions:createTabBarOptions(commonProps),navigationOptions:createNavigationOptions(commonProps)}));
429435
}else if(drawer){

‎src/navigationStore.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { observable, action } from 'mobx';
33
import * as ActionConst from './ActionConst';
44
import { OnEnter, OnExit, assert } from './Util';
55
import { View, Image, Animated, Easing } from 'react-native';
6-
import { TabNavigator, DrawerNavigator, StackNavigator, NavigationActions } from 'react-navigation';
6+
import { TabNavigator, DrawerNavigator, StackNavigator, NavigationActions, TabBarTop, TabBarBottom } from 'react-navigation';
77
import { LeftButton, RightButton, BackButton } from './NavBar';
88
import LightboxNavigator from './LightboxNavigator';
99
import _drawerImage from '../images/menu_burger.png';
@@ -71,6 +71,8 @@ const reservedKeys = [
7171

7272
const dontInheritKeys = [
7373
'component',
74+
'contentComponent',
75+
'tabBarComponent',
7476
'modal',
7577
'drawer',
7678
'tabs',
@@ -312,8 +314,8 @@ class NavigationStore {
312314
}
313315
const res = {};
314316
const order = [];
315-
const { navigator, contentComponent, lazy, duration, ...parentProps } = scene.props;
316-
let { tabs, modal, lightbox, drawer, transitionConfig } = parentProps;
317+
const { navigator, contentComponent, tabBarPosition, lazy, duration, ...parentProps } = scene.props;
318+
let { tabs, modal, lightbox, drawer, tabBarComponent, transitionConfig } = parentProps;
317319
if (scene.type === Modal) {
318320
modal = true;
319321
} else if (scene.type === Drawer) {
@@ -424,6 +426,10 @@ class NavigationStore {
424426
if (lightbox) {
425427
return LightboxNavigator(res, { mode, initialRouteParams, initialRouteName, ...commonProps, navigationOptions: createNavigationOptions(commonProps) });
426428
} else if (tabs) {
429+
if (!tabBarComponent) {
430+
tabBarComponent = tabBarPosition === 'top' ? (props) => <TabBarTop {...props} {...commonProps} /> :
431+
(props) => <TabBarBottom {...props} {...commonProps} />;
432+
}
427433
return TabNavigator(res, { lazy, initialRouteName, initialRouteParams, order, ...commonProps,
428434
tabBarOptions: createTabBarOptions(commonProps), navigationOptions: createNavigationOptions(commonProps) });
429435
} else if (drawer) {

0 commit comments

Comments
 (0)