Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 3d021d5

Browse files
Merge pull request #67 from charpeni/status-bar
Status barNice one. I also like the use of has. 👍
2 parents 6f49242 + 5e22f27 commit 3d021d5

File tree

4 files changed

+80
-19
lines changed

4 files changed

+80
-19
lines changed

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ The **`<Router />`** object used to initialize the navigation can take the follo
122122
- `customAction`: A special callback prop for your action buttons (this can be handy for triggering a side menu for example). The action gets triggered from your custom `leftCorner` or `rightCorner` components by calling `this.props.customAction("someActionName")` from them. It is then picked up like this: `<Router customAction={this.doSomething} />`.
123123
- `hideNavigationBar`: Hide the navigation bar, always
124124
- `handleBackAndroid` (Boolean value): Apply a listener to the native back button on Android. On click, it will go to the previous route until it reach the first scene, then it will exit the app.
125+
- `statusBarProps`: Default StatusBar props, please refer to [StatusBar Docs](https://facebook.github.io/react-native/docs/statusbar.html#content). (Android) If `backgroundColor` isn't provided, it will take the same color as defined in `headerStyle`.
125126

126127

127128
The **`this.props.toRoute()`** callback prop takes one parameter (a JavaScript object) which can have the following keys:
@@ -148,6 +149,7 @@ The **`this.props.toRoute()`** callback prop takes one parameter (a JavaScript o
148149
- Navigator.SceneConfigs.PushFromRight
149150
- Navigator.SceneConfigs.VerticalDownSwipeJump
150151
- Navigator.SceneConfigs.VerticalUpSwipeJump
152+
- `statusBarProps`: Route specific StatusBar props, it will override `statusBarProps` defined in Router, please refer to [StatusBar Docs](https://facebook.github.io/react-native/docs/statusbar.html#content).
151153

152154
The **`this.props.replaceRoute`** function takes in an object that can contain the same keys as `toRoute()`. The difference is that instead of adding a route to your stack, it replaces the route
153155
that you're on with the new route that you pass it.

‎index.js

Lines changed: 71 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
import React, {
22
StyleSheet,
33
Navigator,
4-
StatusBarIOS,
54
View,
65
Platform,
76
PropTypes,
87
Text,
8+
StatusBar,
99
} from 'react-native';
1010

1111
import EventEmitter from 'react-native/Libraries/vendor/emitter/EventEmitter';
1212

1313
import NavBarContainer from './components/NavBarContainer';
1414
import * as Styles from './styles';
1515
import aspect from 'aspect-js';
16+
import _ from 'underscore';
1617

1718
const propTypes = {
1819
backButtonComponent: PropTypes.func,
@@ -27,6 +28,7 @@ const propTypes = {
2728
noStatusBar: PropTypes.bool,
2829
rightCorner: PropTypes.func,
2930
statusBarColor: PropTypes.string,
31+
statusBarProps: PropTypes.object,
3032
titleStyle: Text.propTypes.style,
3133
};
3234

@@ -287,16 +289,8 @@ class Router extends React.Component {
287289

288290
render() {
289291
let navigationBar;
290-
// Status bar color
291-
if (Platform.OS === 'ios') {
292-
if (this.props.statusBarColor === 'black') {
293-
StatusBarIOS.setStyle(0); // "Default" style according to StatusBarIOS.js
294-
} else {
295-
StatusBarIOS.setStyle(1); // "light-content" style according to StatusBarIOS.js
296-
}
297-
} else if (Platform.OS === 'android') {
298-
// no android version yet
299-
}
292+
let statusBar;
293+
let statusBarProps = {};
300294

301295
if (!this.props.hideNavigationBar) {
302296
navigationBar = (
@@ -320,14 +314,73 @@ class Router extends React.Component {
320314
);
321315
}
322316

317+
// Check if StatusBar is available (React-Native >= 0.20)
318+
if (StatusBar) {
319+
// Check for default values provided to Router
320+
if (this.props.statusBarProps) {
321+
// statusBarProps = _.defaults(this.props.statusBarProps, statusBarProps);
322+
statusBarProps = this.props.statusBarProps;
323+
}
324+
325+
// Check for values provided to current route
326+
if (this.state.route.statusBarProps) {
327+
statusBarProps = _.defaults(this.state.route.statusBarProps, statusBarProps);
328+
}
329+
330+
// Android specific code
331+
if (Platform.OS === 'android') {
332+
if (!_.has(statusBarProps, 'backgroundColor') && !_.has(statusBarProps, 'translucent')) {
333+
let backgroundColor;
334+
335+
if (this.state.route.headerStyle && this.state.router.headerStyle.backgroundColor) {
336+
// If current route has specific header style
337+
const stateHeaderStyle = StyleSheet.flatten(this.props.headerStyle);
338+
339+
if (stateHeaderStyle && stateHeaderStyle.backgroundColor) {
340+
backgroundColor = stateHeaderStyle.backgroundColor;
341+
}
342+
} else if (this.props.headerStyle) {
343+
// Otherwise, get backgroundColor as specified to Router
344+
const propsHeaderStyle = StyleSheet.flatten(this.props.headerStyle);
345+
346+
if (propsHeaderStyle && propsHeaderStyle.backgroundColor) {
347+
backgroundColor = propsHeaderStyle.backgroundColor;
348+
}
349+
}
350+
351+
if (backgroundColor) {
352+
statusBarProps.backgroundColor = backgroundColor;
353+
}
354+
}
355+
} else if (Platform.OS === 'ios') {
356+
if (!_.has(statusBarProps, 'barStyle')) {
357+
// NOTE Deprecated prop, shouldn't be used.
358+
if (this.props.statusBarColor === 'black') {
359+
statusBarProps.barStyle = 'default';
360+
} else {
361+
statusBarProps.barStyle = 'light-content';
362+
}
363+
}
364+
}
365+
366+
statusBar = (
367+
<StatusBar
368+
{...statusBarProps}
369+
/>
370+
);
371+
}
372+
323373
return (
324-
<Navigator
325-
ref="navigator"
326-
initialRoute={this.props.firstRoute}
327-
navigationBar={navigationBar}
328-
renderScene={this.renderScene}
329-
configureScene={this.configureScene}
330-
/>
374+
<View style={{ flex: 1 }}>
375+
{statusBar}
376+
<Navigator
377+
ref="navigator"
378+
initialRoute={this.props.firstRoute}
379+
navigationBar={navigationBar}
380+
renderScene={this.renderScene}
381+
configureScene={this.configureScene}
382+
/>
383+
</View>
331384
);
332385
}
333386
}

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,8 @@
3333
},
3434
"homepage": "https://github.com/react-native-simple-router-community/react-native-simple-router",
3535
"dependencies": {
36-
"aspect-js": "^1.0.3"
36+
"aspect-js": "^1.0.3",
37+
"underscore": "^1.8.3"
3738
},
3839
"peerDependencies": {
3940
"react-native": ">=0.12.0 || 0.5.0-rc1 || 0.6.0-rc || 0.7.0-rc || 0.7.0-rc.2 || 0.8.0-rc || 0.8.0-rc.2 || 0.9.0-rc || 0.10.0-rc || 0.11.0-rc || 0.12.0-rc || 0.13.0-rc || 0.14.0-rc || 0.15.0-rc || 0.16.0-rc || 0.17.0-rc || 0.18.0-rc || 0.19.0-rc || 0.20.0-rc || 0.20.0-rc1"

‎twitter-example/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ const styles = StyleSheet.create({
1919
},
2020
});
2121

22+
const statusBarProps = {
23+
backgroundColor: '#1b6298',
24+
};
25+
2226
export default class TwitterApp extends React.Component {
2327
render() {
2428
return (
@@ -27,6 +31,7 @@ export default class TwitterApp extends React.Component {
2731
headerStyle={styles.header}
2832
backButtonComponent={BackButton}
2933
rightCorner={SearchAndCompose}
34+
statusBarProps={statusBarProps}
3035
/>
3136
);
3237
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /