kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-04-23 20:01:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add imperative API to StatusBar

Browse Source 
Reviewed By: svcscm

Differential Revision: D2938743

fb-gh-sync-id: 30af304efd5b089854d9a8defc1b77fd8e817d13
shipit-source-id: 30af304efd5b089854d9a8defc1b77fd8e817d13
This commit is contained in:
Janic Duplessis
2016-02-16 03:04:16 -08:00
committed by facebook-github-bot-8
parent 9a918ef48f
commit edbe6a2b24
3 changed files with 212 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
Libraries/Components/StatusBar/StatusBar.js
View File

@@ -19,6 +19,17 @@ const processColor = require('processColor');
const StatusBarManager = require('NativeModules').StatusBarManager;
export type StatusBarStyle = $Enum<{
'default': string,
'light-content': string,
}>;
export type StatusBarAnimation = $Enum<{
'none': string,
'fade': string,
'slide': string,
}>;
type DefaultProps = {
animated: boolean;
};
@@ -26,16 +37,10 @@ type DefaultProps = {
/**
* Merges the prop stack with the default values.
*/
function mergePropsStack(propsStack: Array<Object>): Object {
function mergePropsStack(propsStack: Array<Object>, defaultValues: Object): Object {
return propsStack.reduce((prev, cur) => {
return Object.assign(prev, cur);
}, {
backgroundColor: 'black',
barStyle: 'default',
translucent: false,
hidden: false,
networkActivityIndicatorVisible: false,
});
}, defaultValues);
}
/**
@@ -64,10 +69,75 @@ function mergePropsStack(propsStack: Array<Object>): Object {
* />
* </View>
* ```
*
* ### Imperative API
*
* For cases where using a component is not ideal, there is also an imperative
* API exposed as static functions on the component. It is however not recommended
* to use the static API and the compoment for the same prop because any value
* set by the static API will get overriden by the one set by the component in
* the next render.
*/
const StatusBar = React.createClass({
statics: {
_propsStack: [],
_defaultProps: {
backgroundColor: 'black',
barStyle: 'default',
translucent: false,
hidden: false,
networkActivityIndicatorVisible: false,
},
// Provide an imperative API as static functions of the component.
// See the corresponding prop for more detail.
setHidden(hidden: boolean, animation?: StatusBarAnimation) {
animation = animation || 'none';
StatusBar._defaultProps.hidden = hidden;
if (Platform.OS === 'ios') {
StatusBarManager.setHidden(hidden, animation);
} else if (Platform.OS === 'android') {
StatusBarManager.setHidden(hidden);
}
},
setBarStyle(style: StatusBarStyle, animated?: boolean) {
if (Platform.OS !== 'ios') {
console.warn('`setBarStyle` is only available on iOS');
return;
}
animated = animated || false;
StatusBar._defaultProps.barStyle = style;
StatusBarManager.setStyle(style, animated);
},
setNetworkActivityIndicatorVisible(visible: boolean) {
if (Platform.OS !== 'ios') {
console.warn('`setNetworkActivityIndicatorVisible` is only available on iOS');
return;
}
StatusBar._defaultProps.networkActivityIndicatorVisible = visible;
StatusBarManager.setNetworkActivityIndicatorVisible(visible);
},
setBackgroundColor(color, animated?: boolean) {
if (Platform.OS !== 'android') {
console.warn('`setBackgroundColor` is only available on Android');
return;
}
animated = animated || false;
StatusBar._defaultProps.backgroundColor = color;
StatusBarManager.setColor(processColor(color), animated);
},
setTranslucent(translucent: boolean) {
if (Platform.OS !== 'android') {
console.warn('`setTranslucent` is only available on Android');
return;
}
StatusBar._defaultProps.translucent = translucent;
StatusBarManager.setTranslucent(translucent);
},
},
propTypes: {
@@ -156,7 +226,7 @@ const StatusBar = React.createClass({
* Updates the native status bar with the props from the stack.
*/
_updatePropsStack() {
const mergedProps = mergePropsStack(StatusBar._propsStack);
const mergedProps = mergePropsStack(StatusBar._propsStack, StatusBar._defaultProps);
if (Platform.OS === 'ios') {
if (mergedProps.barStyle !== undefined) {

32
Libraries/Components/StatusBar/StatusBarIOS.ios.js
View File

@@ -11,33 +11,31 @@
*/
'use strict';
var RCTStatusBarManager = require('NativeModules').StatusBarManager;
const StatusBar = require('StatusBar');
type StatusBarStyle = $Enum<{
'default': string,
'light-content': string,
}>;
import type {StatusBarStyle, StatusBarAnimation} from 'StatusBar';
type StatusBarAnimation = $Enum<{
'none': string,
'fade': string,
'slide': string,
}>;
var StatusBarIOS = {
/**
* Deprecated. Use `StatusBar` instead.
*/
const StatusBarIOS = {
setStyle(style: StatusBarStyle, animated?: boolean) {
animated = animated || false;
RCTStatusBarManager.setStyle(style, animated);
console.warn('`StatusBarIOS.setStyle` is deprecated. Use `StatusBar.setBarStyle` instead.');
StatusBar.setBarStyle(style, animated);
},
setHidden(hidden: boolean, animation?: StatusBarAnimation) {
animation = animation || 'none';
RCTStatusBarManager.setHidden(hidden, animation);
console.warn('`StatusBarIOS.setHidden` is deprecated. Use `StatusBar.setHidden` instead.');
StatusBar.setHidden(hidden, animation);
},
setNetworkActivityIndicatorVisible(visible: boolean) {
RCTStatusBarManager.setNetworkActivityIndicatorVisible(visible);
console.warn(
'`StatusBarIOS.setNetworkActivityIndicatorVisible` is deprecated. ' +
'Use `StatusBar.setNetworkActivityIndicatorVisible` instead.'
);
StatusBar.setNetworkActivityIndicatorVisible(visible);
},
};