Skip to content

Commit 845c76b

Browse files
author
aksonov
committed
pass all Router params to LightboxNavigator (#2042), make Example stateless
1 parent 6e0a297 commit 845c76b

File tree

5 files changed

+172
-173
lines changed

5 files changed

+172
-173
lines changed

‎Example/Example.js‎

Lines changed: 83 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -46,99 +46,97 @@ const reducerCreate = params => {
4646
};
4747
};
4848

49-
class Example extends Component {
50-
render() {
51-
return (
52-
<Router createReducer={reducerCreate} tintColor='red'>
53-
<Scene key="lightbox" lightbox leftButtonTextStyle={{ color: 'green' }} backButtonTextStyle={{ color:'red' }} >
54-
<Scene key="modal" modal hideNavBar>
55-
<Scene key="drawer" drawer contentComponent={TabView} >
56-
<Scene key="root" hideNavBar hideTabBar>
57-
<Scene key="echo" back clone component={EchoView} getTitle={({navigation}) => navigation.state.key}/>
58-
<Scene key="register" back>
59-
<Scene key="_register" component={Register} title="Register" />
60-
<Scene key="register2" component={Register} title="Register2" />
61-
<Scene key="home" component={Home} title="Replace" type={ActionConst.REPLACE} />
62-
</Scene>
63-
<Scene key="launch" component={Launch} title="Launch" initial />
49+
const Example = () => {
50+
return (
51+
<Router createReducer={reducerCreate} tintColor='red'>
52+
<Scene key="lightbox" lightbox leftButtonTextStyle={{color: 'green'}} backButtonTextStyle={{color: 'red'}}>
53+
<Scene key="modal" modal hideNavBar>
54+
<Scene key="drawer" drawer contentComponent={TabView}>
55+
<Scene key="root" hideNavBar hideTabBar>
56+
<Scene key="echo" back clone component={EchoView} getTitle={({navigation}) => navigation.state.key}/>
57+
<Scene key="register" back>
58+
<Scene key="_register" component={Register} title="Register"/>
59+
<Scene key="register2" component={Register} title="Register2"/>
60+
<Scene key="home" component={Home} title="Replace" type={ActionConst.REPLACE}/>
61+
</Scene>
62+
<Scene key="launch" component={Launch} title="Launch" initial/>
63+
<Scene
64+
key="tabbar"
65+
gestureEnabled={false}
66+
tabs
67+
tabBarStyle={styles.tabBarStyle}
68+
activeBackgroundColor='#ddd'
69+
>
6470
<Scene
65-
key="tabbar"
66-
gestureEnabled={false}
67-
tabs
68-
tabBarStyle={styles.tabBarStyle}
69-
activeBackgroundColor='#ddd'
71+
key="tab1"
72+
title="Tab #1"
73+
tabBarLabel="TAB #1"
74+
icon={TabIcon}
75+
navigationBarStyle={{backgroundColor: 'red'}}
76+
titleStyle={{color: 'white'}}
7077
>
7178
<Scene
72-
key="tab1"
73-
title="Tab #1"
74-
tabBarLabel="TAB #1"
75-
icon={TabIcon}
76-
navigationBarStyle={{backgroundColor: 'red'}}
77-
titleStyle={{color: 'white'}}
78-
>
79-
<Scene
80-
key="tab1_1"
81-
component={TabView}
82-
title="Tab #1_1"
83-
onRight={() => alert('Right button')}
84-
rightTitle="Right"
85-
/>
86-
<Scene
87-
key="tab1_2"
88-
component={TabView}
89-
title="Tab #1_2"
90-
back
91-
titleStyle={{color: 'black'}}
92-
/>
93-
</Scene>
94-
<Scene key="tab2" initial title="Tab #2" icon={TabIcon}>
95-
<Scene
96-
key="tab2_1"
97-
component={TabView}
98-
title="Tab #2_1"
99-
renderRightButton={() => <Text>Right</Text>}
100-
/>
101-
<Scene
102-
key="tab2_2"
103-
component={TabView}
104-
title="Tab #2_2"
105-
back
106-
onBack={() => alert('onBack button!')}
107-
backTitle="Back!"
108-
panHandlers={null}
109-
/>
110-
</Scene>
111-
<Scene key="tab3" component={TabView} title="Tab #3" icon={TabIcon}/>
112-
<Scene key="tab4" component={TabView} title="Tab #4" hideNavBar icon={TabIcon}/>
113-
<Scene key="tab5" component={TabView} title="Tab #5" icon={TabIcon}/>
79+
key="tab1_1"
80+
component={TabView}
81+
title="Tab #1_1"
82+
onRight={() => alert('Right button')}
83+
rightTitle="Right"
84+
/>
85+
<Scene
86+
key="tab1_2"
87+
component={TabView}
88+
title="Tab #1_2"
89+
back
90+
titleStyle={{color: 'black'}}
91+
/>
11492
</Scene>
93+
<Scene key="tab2" initial title="Tab #2" icon={TabIcon}>
94+
<Scene
95+
key="tab2_1"
96+
component={TabView}
97+
title="Tab #2_1"
98+
renderRightButton={() => <Text>Right</Text>}
99+
/>
100+
<Scene
101+
key="tab2_2"
102+
component={TabView}
103+
title="Tab #2_2"
104+
back
105+
onBack={() => alert('onBack button!')}
106+
backTitle="Back!"
107+
panHandlers={null}
108+
/>
109+
</Scene>
110+
<Scene key="tab3" component={TabView} title="Tab #3" icon={TabIcon}/>
111+
<Scene key="tab4" component={TabView} title="Tab #4" hideNavBar icon={TabIcon}/>
112+
<Scene key="tab5" component={TabView} title="Tab #5" icon={TabIcon}/>
115113
</Scene>
116114
</Scene>
117-
<Scene key="login" >
118-
<Scene key="loginModal" component={Login} title="Login" leftTitle="Cancel" onLeft={Actions.pop}/>
119-
<Scene
120-
key="loginModal2"
121-
component={Login2}
122-
title="Login2"
123-
backTitle="Back"
124-
panHandlers={null}
125-
duration={1}
126-
/>
127-
<Scene
128-
key="loginModal3"
129-
hideNavBar
130-
component={Login3}
131-
title="Login3"
132-
panHandlers={null}
133-
duration={1}
134-
/>
135-
</Scene>
136115
</Scene>
137-
<Scene key="error" component={Error}/>
116+
<Scene key="login">
117+
<Scene key="loginModal" component={Login} title="Login" leftTitle="Cancel" onLeft={Actions.pop}/>
118+
<Scene
119+
key="loginModal2"
120+
component={Login2}
121+
title="Login2"
122+
backTitle="Back"
123+
panHandlers={null}
124+
duration={1}
125+
/>
126+
<Scene
127+
key="loginModal3"
128+
hideNavBar
129+
component={Login3}
130+
title="Login3"
131+
panHandlers={null}
132+
duration={1}
133+
/>
134+
</Scene>
138135
</Scene>
139-
</Router>
140-
);
141-
}
136+
<Scene key="error" component={Error}/>
137+
</Scene>
138+
</Router>
139+
);
142140
}
143141

144142
export default Example;

‎dist/NavBar.js‎

Lines changed: 82 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,84 @@
1-
Object.defineProperty(exports,"__esModule",{value:true});exports.RightButton=exports.LeftButton=undefined;var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};var _jsxFileName='src/NavBar.js';exports.
1+
Object.defineProperty(exports,"__esModule",{value:true});var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};var _jsxFileName='src/NavBar.js';exports.
2+
3+
4+
5+
6+
7+
8+
9+
10+
11+
12+
13+
renderBackButton=renderBackButton;exports.
14+
15+
16+
17+
18+
19+
20+
21+
22+
23+
24+
25+
26+
27+
28+
29+
30+
31+
32+
33+
34+
35+
36+
37+
38+
39+
40+
41+
42+
43+
44+
45+
46+
47+
48+
49+
50+
51+
52+
53+
54+
55+
56+
57+
58+
59+
60+
LeftButton=LeftButton;exports.
61+
62+
63+
64+
65+
66+
67+
68+
69+
70+
71+
72+
73+
74+
75+
76+
77+
78+
79+
80+
81+
282

383

484

@@ -10,117 +90,37 @@ Object.defineProperty(exports,"__esModule",{value:true});exports.RightButton=exp
1090

1191

1292

13-
renderBackButton=renderBackButton;var _react=require('react');var _react2=_interopRequireDefault(_react);var _reactNative=require('react-native');var _navigationStore=require('./navigationStore');var _navigationStore2=_interopRequireDefault(_navigationStore);var _back_chevron=require('../images/back_chevron.png');var _back_chevron2=_interopRequireDefault(_back_chevron);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function renderBackButton(state){
14-
var textButtonStyle=[
15-
styles.barBackButtonText,
16-
state.backButtonTextStyle];
1793

18-
var style=[
19-
styles.backButton,
20-
state.leftButtonStyle];
2194

22-
var buttonImage=state.backButtonImage||_back_chevron2.default;
23-
var tintColor=getValue(state.backButtonTintColor,state)||state.tintColor||state.navBarButtonColor||state.headerTintColor;
24-
var onPress=state.onBack;
25-
if(onPress){
26-
onPress=onPress.bind(null,state);
27-
}else{
28-
onPress=_navigationStore2.default.pop;
29-
}
3095

31-
var text=state.backTitle?
32-
_react2.default.createElement(_reactNative.Text,{style:textButtonStyle,__source:{fileName:_jsxFileName,lineNumber:32}},
33-
state.backTitle):
3496

35-
null;
3697

37-
return(
38-
_react2.default.createElement(_reactNative.TouchableOpacity,{
39-
testID:'backNavButton',
40-
style:styles.backButtonContainer,
41-
onPress:onPress,__source:{fileName:_jsxFileName,lineNumber:38}},
4298

43-
_react2.default.createElement(_reactNative.View,{style:style,__source:{fileName:_jsxFileName,lineNumber:43}},
44-
buttonImage&&!state.hideBackImage&&_react2.default.createElement(_reactNative.Image,{
45-
source:buttonImage,
46-
style:[
47-
styles.backButtonImage,
48-
state.barButtonIconStyle,
49-
state.leftButtonIconStyle,
50-
{tintColor:tintColor}],__source:{fileName:_jsxFileName,lineNumber:44}}),
5199

52100

53101

54-
text)));
55102

56103

57104

58-
}
59105

60-
var LeftButton=exports.LeftButton=function LeftButton(state){
61-
var onPress=state.onLeft;
62-
var buttonImage=getValue(state.leftButtonImage,state);
63-
var menuIcon=state.drawerIcon;
64-
var style=[styles.leftButton,state.leftButtonStyle];
65-
var leftButtonTextStyle=getValue(state.leftButtonTextStyle,state);
66-
var leftButtonIconStyle=getValue(state.leftButtonIconStyle,state);
67-
var leftButtonStyle=[styles.defaultImageStyle,leftButtonIconStyle];
68-
var leftTitle=state.getLeftTitle?state.getLeftTitle(state):getValue(state.leftTitle,state);
69-
var textColor=getValue(state.leftButtonTintColor,state);
70-
var tintColor=textColor||state.tintColor||state.navBarButtonColor||state.headerTintColor;
71-
var textStyle=[{color:tintColor},styles.barLeftButtonText,leftButtonTextStyle,textColor&&{color:textColor}];
72106

73-
if(state.leftButton){
74-
var Button=state.leftButton||state.left;
75-
return(
76-
_react2.default.createElement(Button,_extends({},
77-
state,{
78-
key:'leftNavBarBtn',
79-
testID:'leftNavButton',
80-
style:[].concat(style,leftButtonStyle),
81-
textStyle:textStyle,__source:{fileName:_jsxFileName,lineNumber:76}})));
82107

83108

84-
}
85109

86-
if(onPress&&(leftTitle||buttonImage)){
87-
onPress=onPress.bind(null,state);
88-
return(
89-
_react2.default.createElement(_reactNative.TouchableOpacity,{
90-
key:'leftNavBarBtn',
91-
testID:'leftNavButton',
92-
style:style,
93-
onPress:onPress,__source:{fileName:_jsxFileName,lineNumber:89}},
94110

95-
leftTitle&&_react2.default.createElement(_reactNative.Text,{style:textStyle,__source:{fileName:_jsxFileName,lineNumber:95}},
96-
leftTitle),
97111

98112

99-
!leftTitle&&buttonImage&&_react2.default.createElement(_reactNative.View,{style:{flex:1,justifyContent:'center',alignItems:'flex-start'},__source:{fileName:_jsxFileName,lineNumber:99}},
100-
menuIcon||_react2.default.createElement(_reactNative.Image,{
101-
source:buttonImage,
102-
style:[state.leftButtonIconStyle||styles.defaultImageStyle,{tintColor:tintColor}],__source:{fileName:_jsxFileName,lineNumber:100}}))));
103113

104114

105115

106116

107117

108118

109-
}
110-
if(!!state.onLeft^!!(leftTitle||buttonImage)){
111-
console.warn('Both onLeft and leftTitle/leftButtonImage\n must be specified for the scene: '+
112119

113-
state.name);
114120

115-
}
116-
return null;
117-
};
118121

119-
function getValue(value,params){
120-
return value instanceof Function?value(params):value;
121-
}
122122

123-
var RightButton=exports.RightButton=function RightButton(state){
123+
RightButton=RightButton;var _react=require('react');var _react2=_interopRequireDefault(_react);var _reactNative=require('react-native');var _navigationStore=require('./navigationStore');var _navigationStore2=_interopRequireDefault(_navigationStore);var _back_chevron=require('../images/back_chevron.png');var _back_chevron2=_interopRequireDefault(_back_chevron);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function renderBackButton(state){var textButtonStyle=[styles.barBackButtonText,state.backButtonTextStyle];var style=[styles.backButton,state.leftButtonStyle];var buttonImage=state.backButtonImage||_back_chevron2.default;var tintColor=getValue(state.backButtonTintColor,state)||state.tintColor||state.navBarButtonColor||state.headerTintColor;var onPress=state.onBack;if(onPress){onPress=onPress.bind(null,state);}else{onPress=_navigationStore2.default.pop;}var text=state.backTitle?_react2.default.createElement(_reactNative.Text,{style:textButtonStyle,__source:{fileName:_jsxFileName,lineNumber:32}},state.backTitle):null;return _react2.default.createElement(_reactNative.TouchableOpacity,{testID:'backNavButton',style:styles.backButtonContainer,onPress:onPress,__source:{fileName:_jsxFileName,lineNumber:38}},_react2.default.createElement(_reactNative.View,{style:style,__source:{fileName:_jsxFileName,lineNumber:43}},buttonImage&&!state.hideBackImage&&_react2.default.createElement(_reactNative.Image,{source:buttonImage,style:[styles.backButtonImage,state.barButtonIconStyle,state.leftButtonIconStyle,{tintColor:tintColor}],__source:{fileName:_jsxFileName,lineNumber:44}}),text));}function LeftButton(state){var onPress=state.onLeft;var buttonImage=getValue(state.leftButtonImage,state);var menuIcon=state.drawerIcon;var style=[styles.leftButton,state.leftButtonStyle];var leftButtonTextStyle=getValue(state.leftButtonTextStyle,state);var leftButtonIconStyle=getValue(state.leftButtonIconStyle,state);var leftButtonStyle=[styles.defaultImageStyle,leftButtonIconStyle];var leftTitle=state.getLeftTitle?state.getLeftTitle(state):getValue(state.leftTitle,state);var textColor=getValue(state.leftButtonTintColor,state);var tintColor=textColor||state.tintColor||state.navBarButtonColor||state.headerTintColor;var textStyle=[{color:tintColor},styles.barLeftButtonText,leftButtonTextStyle,textColor&&{color:textColor}];if(state.leftButton){var Button=state.leftButton||state.left;return _react2.default.createElement(Button,_extends({},state,{key:'leftNavBarBtn',testID:'leftNavButton',style:[].concat(style,leftButtonStyle),textStyle:textStyle,__source:{fileName:_jsxFileName,lineNumber:76}}));}if(onPress&&(leftTitle||buttonImage)){onPress=onPress.bind(null,state);return _react2.default.createElement(_reactNative.TouchableOpacity,{key:'leftNavBarBtn',testID:'leftNavButton',style:style,onPress:onPress,__source:{fileName:_jsxFileName,lineNumber:89}},leftTitle&&_react2.default.createElement(_reactNative.Text,{style:textStyle,__source:{fileName:_jsxFileName,lineNumber:95}},leftTitle),!leftTitle&&buttonImage&&_react2.default.createElement(_reactNative.View,{style:{flex:1,justifyContent:'center',alignItems:'flex-start'},__source:{fileName:_jsxFileName,lineNumber:99}},menuIcon||_react2.default.createElement(_reactNative.Image,{source:buttonImage,style:[state.leftButtonIconStyle||styles.defaultImageStyle,{tintColor:tintColor}],__source:{fileName:_jsxFileName,lineNumber:100}})));}if(!!state.onLeft^!!(leftTitle||buttonImage)){console.warn('Both onLeft and leftTitle/leftButtonImage\n must be specified for the scene: '+state.name);}return null;};function getValue(value,params){return value instanceof Function?value(params):value;}function RightButton(state){
124124
var drawer=null;
125125
if(!state){
126126
return null;

‎dist/Router.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -294,7 +294,7 @@ if(navigator){
294294
return navigator(res,_extends({lazy:lazy,initialRouteName:initialRouteName,initialRouteParams:initialRouteParams,order:order},commonProps,{navigationOptions:createNavigationOptions(commonProps)}));
295295
}
296296
if(lightbox){
297-
return(0,_LightboxNavigator2.default)(res,{mode:mode,initialRouteParams:initialRouteParams,initialRouteName:initialRouteName,navigationOptions:createNavigationOptions(commonProps)});
297+
return(0,_LightboxNavigator2.default)(res,_extends({mode:mode,initialRouteParams:initialRouteParams,initialRouteName:initialRouteName},commonProps,{navigationOptions:createNavigationOptions(commonProps)}));
298298
}else if(tabs){
299299
return(0,_reactNavigation.TabNavigator)(res,_extends({lazy:lazy,initialRouteName:initialRouteName,initialRouteParams:initialRouteParams,order:order},commonProps,{
300300
tabBarOptions:createTabBarOptions(commonProps),navigationOptions:createNavigationOptions(commonProps)}));

0 commit comments

Comments
 (0)