Skip to content

Commit cb4d994

Browse files
aksonovaksonov
authored
Fixes #2220 (#2281)
1 parent 24665a7 commit cb4d994

File tree

10 files changed

+199
-51
lines changed

10 files changed

+199
-51
lines changed

‎Example/Example.js‎

Lines changed: 37 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
Actions,
1919
Reducer,
2020
ActionConst,
21+
Overlay,
2122
Tabs,
2223
Modal,
2324
Drawer,
@@ -52,49 +53,54 @@ const reducerCreate = params => {
5253
};
5354
};
5455
const getSceneStyle = () => ({
55-
backgroundColor: "white",
56+
backgroundColor: "#F5FCFF",
5657
shadowOpacity: 1,
5758
shadowRadius: 3,
5859
});
59-
60+
const BackgroundView = () => <View style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, backgroundColor:'red' }}/>
6061
const Example = () => (
61-
<View style={{ flex: 1 }}>
62-
<Router createReducer={reducerCreate} tintColor="red" getSceneStyle={getSceneStyle}>
63-
<Modal hideNavBar transitionConfig={() => ({ screenInterpolator: CardStackStyleInterpolator.forFadeFromBottomAndroid })}>
64-
<Lightbox leftButtonTextStyle={{ color: 'green' }} backButtonTextStyle={{ color: 'red' }}>
65-
<Stack hideNavBar hideTabBar titleStyle={{ alignSelf: 'center' }}>
66-
<Scene key="echo" back clone component={EchoView} getTitle={({ navigation }) => navigation.state.key} />
67-
<Scene key="register" back duration={0} >
68-
<Scene key="_register" component={Register} title="Register" />
69-
<Scene key="register2" component={Register} title="Register2" />
70-
<Scene key="home" component={Home} title="Replace" type={ActionConst.REPLACE} />
62+
<Router createReducer={reducerCreate} tintColor="red" getSceneStyle={getSceneStyle}>
63+
<Overlay>
64+
<Modal hideNavBar
65+
transitionConfig={() => ({screenInterpolator: CardStackStyleInterpolator.forFadeFromBottomAndroid})}>
66+
<Lightbox leftButtonTextStyle={{color: 'green'}} backButtonTextStyle={{color: 'red'}}>
67+
<Stack hideNavBar hideTabBar titleStyle={{alignSelf: 'center'}}>
68+
<Scene key="echo" back clone component={EchoView} getTitle={({navigation}) => navigation.state.key}/>
69+
<Scene key="register" back duration={0}>
70+
<Scene key="_register" component={Register} title="Register"/>
71+
<Scene key="register2" component={Register} title="Register2"/>
72+
<Scene key="home" component={Home} title="Replace" type={ActionConst.REPLACE}/>
7173
</Scene>
72-
<Scene key="launch" component={Launch} title="Launch" initial />
74+
<Scene key="launch" component={Launch} title="Launch" initial/>
7375
<Drawer contentComponent={TabView}>
74-
<Tabs key="tabbar" gestureEnabled={false} showLabel={false} tabs tabBarStyle={styles.tabBarStyle} activeBackgroundColor="white"
76+
<Tabs key="tabbar" gestureEnabled={false} showLabel={false} tabs tabBarStyle={styles.tabBarStyle}
77+
activeBackgroundColor="white"
7578
inactiveBackgroundColor="red">
7679
<Stack
7780
key="tab1"
7881
title="Tab #1"
7982
tabBarLabel="TAB #1"
8083
inactiveBackgroundColor='white' activeBackgroundColor='#dddddd'
8184
icon={TabIcon}
82-
navigationBarStyle={{ backgroundColor: 'green' }}
83-
titleStyle={{ color: 'white', alignSelf: 'center' }}
85+
navigationBarStyle={{backgroundColor: 'green'}}
86+
titleStyle={{color: 'white', alignSelf: 'center'}}
8487
>
85-
<Scene
86-
key="tab1_1"
87-
component={TabView}
88-
title="Tab #1_1"
89-
onRight={() => alert('Right button')}
90-
rightTitle="Right"
91-
/>
88+
<Overlay>
89+
<Scene component={BackgroundView} />
90+
<Scene
91+
key="tab1_1"
92+
component={TabView}
93+
title="Tab #1_1"
94+
onRight={() => alert('Right button')}
95+
rightTitle="Right"
96+
/>
97+
</Overlay>
9298
<Scene
9399
key="tab1_2"
94100
component={TabView}
95101
title="Tab #1_2"
96102
back
97-
titleStyle={{ color: 'black', alignSelf: 'center' }}
103+
titleStyle={{color: 'black', alignSelf: 'center'}}
98104
/>
99105
</Stack>
100106
<Scene key="tab2" initial title="Tab #2" icon={TabIcon}>
@@ -113,7 +119,8 @@ const Example = () => (
113119
panHandlers={null}
114120
/>
115121
</Scene>
116-
<Scene key="tab3" component={TabView} title="Tab #3" icon={TabIcon} rightTitle="Right3" onRight={()=>{}}/>
122+
<Scene key="tab3" component={TabView} title="Tab #3" icon={TabIcon} rightTitle="Right3" onRight={() => {
123+
}}/>
117124
<Scene key="tab4" component={TabView} title="Tab #4" hideNavBar icon={TabIcon}/>
118125
<Scene key="tab5" component={TabView} title="Tab #5" icon={TabIcon}/>
119126
</Tabs>
@@ -124,7 +131,7 @@ const Example = () => (
124131
<Stack key="login" titleStyle={{alignSelf: "center"}}>
125132
<Scene component={Login} title="Login"
126133
key="loginModal"
127-
onExit={()=>console.log("onExit")}
134+
onExit={() => console.log("onExit")}
128135
leftTitle="Cancel" onLeft={Actions.pop}/>
129136
<Scene
130137
key="loginModal2"
@@ -144,8 +151,9 @@ const Example = () => (
144151
/>
145152
</Stack>
146153
</Modal>
147-
</Router>
148-
<MessageBar />
149-
</View>);
154+
<Scene component={MessageBar} />
155+
</Overlay>
156+
</Router>
157+
);
150158

151159
export default Example;

‎Example/components/TabView.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
1919
flex: 1,
2020
justifyContent: 'center',
2121
alignItems: 'center',
22-
backgroundColor: '#F5FCFF',
22+
backgroundColor: 'transparent',
2323
borderWidth: 2,
2424
borderColor: 'red',
2525
},

‎dist/Overlay.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
Object.defineProperty(exports,"__esModule",{value:true});exports.default=
2+
3+
4+
5+
6+
7+
8+
9+
function(){return null;};

‎dist/OverlayNavigator.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
Object.defineProperty(exports,"__esModule",{value:true});var _jsxFileName='src/OverlayNavigator.js';
2+
3+
var _react=require('react');var _react2=_interopRequireDefault(_react);
4+
var _reactNavigation=require('react-navigation');
5+
var _reactNative=require('react-native');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}
6+
7+
var OverlayNavigator=function OverlayNavigator(
8+
routeConfigs)
9+
10+
{var tabsConfig=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};
11+
var router=(0,_reactNavigation.TabRouter)(routeConfigs,tabsConfig);
12+
13+
var navigator=(0,_reactNavigation.createNavigator)(
14+
router,
15+
routeConfigs,
16+
tabsConfig,
17+
'react-navigation/STACK')(
18+
function(_ref){var navigation=_ref.navigation;var
19+
state=navigation.state,dispatch=navigation.dispatch;var
20+
routes=state.routes;
21+
22+
23+
var Component=routeConfigs[tabsConfig.initialRouteName].screen;
24+
var initialIndex=0;
25+
for(var i=0;i<routes.length;i++){
26+
var route=routes[i];
27+
if(route.routeName===tabsConfig.initialRouteName){
28+
initialIndex=i;
29+
}
30+
}
31+
var initialRouteName=tabsConfig.initialRouteName||routes[initialIndex].routeName;
32+
var overlays=[];
33+
for(var _i=0;_i<tabsConfig.order.length;_i++){
34+
var routeName=tabsConfig.order[_i];
35+
if(initialRouteName!==routeName){
36+
var Overlay=routeConfigs[routeName].screen;
37+
overlays.push(_react2.default.createElement(Overlay,{key:routeName,navigation:{dispatch:dispatch,state:state},__source:{fileName:_jsxFileName,lineNumber:37}}));
38+
}
39+
}
40+
var ContentComponent=tabsConfig.contentComponent||_reactNative.View;
41+
return _react2.default.createElement(ContentComponent,{style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:41}},
42+
_react2.default.createElement(Component,{navigation:{dispatch:dispatch,state:routes[initialIndex]},__source:{fileName:_jsxFileName,lineNumber:42}}),
43+
overlays);
44+
45+
});
46+
47+
return(0,_reactNavigation.createNavigationContainer)(navigator,tabsConfig.containerOptions);
48+
};exports.default=
49+
50+
OverlayNavigator;

‎dist/index.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
Object.defineProperty(exports,"__esModule",{value:true});exports.Tabs=exports.Drawer=exports.Stack=exports.Lightbox=exports.Modal=exports.Actions=exports.Scene=exports.Router=exports.Reducer=exports.ActionConst=undefined;var _ActionConst=require('./ActionConst');var ActionConst=_interopRequireWildcard(_ActionConst);
1+
Object.defineProperty(exports,"__esModule",{value:true});exports.Overlay=exports.Tabs=exports.Drawer=exports.Stack=exports.Lightbox=exports.Modal=exports.Actions=exports.Scene=exports.Router=exports.Reducer=exports.ActionConst=undefined;var _ActionConst=require('./ActionConst');var ActionConst=_interopRequireWildcard(_ActionConst);
22
var _Reducer=require('./Reducer');var _Reducer2=_interopRequireDefault(_Reducer);
33
var _Router=require('./Router');var _Router2=_interopRequireDefault(_Router);
44
var _Scene=require('./Scene');var _Scene2=_interopRequireDefault(_Scene);
@@ -7,7 +7,8 @@ var _Modal=require('./Modal');var _Modal2=_interopRequireDefault(_Modal);
77
var _Lightbox=require('./Lightbox');var _Lightbox2=_interopRequireDefault(_Lightbox);
88
var _Stack=require('./Stack');var _Stack2=_interopRequireDefault(_Stack);
99
var _Drawer=require('./Drawer');var _Drawer2=_interopRequireDefault(_Drawer);
10-
var _Tabs=require('./Tabs');var _Tabs2=_interopRequireDefault(_Tabs);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _interopRequireWildcard(obj){if(obj&&obj.__esModule){return obj;}else{var newObj={};if(obj!=null){for(var key in obj){if(Object.prototype.hasOwnProperty.call(obj,key))newObj[key]=obj[key];}}newObj.default=obj;return newObj;}}exports.
10+
var _Tabs=require('./Tabs');var _Tabs2=_interopRequireDefault(_Tabs);
11+
var _Overlay=require('./Overlay');var _Overlay2=_interopRequireDefault(_Overlay);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _interopRequireWildcard(obj){if(obj&&obj.__esModule){return obj;}else{var newObj={};if(obj!=null){for(var key in obj){if(Object.prototype.hasOwnProperty.call(obj,key))newObj[key]=obj[key];}}newObj.default=obj;return newObj;}}exports.
1112

1213

1314
ActionConst=ActionConst;exports.
@@ -19,4 +20,5 @@ Modal=_Modal2.default;exports.
1920
Lightbox=_Lightbox2.default;exports.
2021
Stack=_Stack2.default;exports.
2122
Drawer=_Drawer2.default;exports.
22-
Tabs=_Tabs2.default;
23+
Tabs=_Tabs2.default;exports.
24+
Overlay=_Overlay2.default;

0 commit comments

Comments
 (0)