kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-02-08 22:42:40 +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

131
Examples/UIExplorer/StatusBarExample.js
View File

@@ -57,12 +57,16 @@ const showHideTransitions = [
'slide',
];
function getValue(values: Array<any>, index: number): any {
return values[index % values.length];
}
const StatusBarExample = React.createClass({
getInitialState(): State {
return {
animated: true,
backgroundColor: this._getValue(colors, 0),
showHideTransition: this._getValue(showHideTransitions, 0),
backgroundColor: getValue(colors, 0),
showHideTransition: getValue(showHideTransitions, 0),
};
},
@@ -70,10 +74,6 @@ const StatusBarExample = React.createClass({
_barStyleIndex: 0,
_showHideTransitionIndex: 0,
_getValue(values: Array<any>, index: number): any {
return values[index % values.length];
},
render() {
return (
<View>
@@ -110,10 +110,10 @@ const StatusBarExample = React.createClass({
style={styles.wrapper}
onPress={() => {
this._barStyleIndex++;
this.setState({barStyle: this._getValue(barStyles, this._barStyleIndex)});
this.setState({barStyle: getValue(barStyles, this._barStyleIndex)});
}}>
<View style={styles.button}>
<Text>style: '{this._getValue(barStyles, this._barStyleIndex)}'</Text>
<Text>style: '{getValue(barStyles, this._barStyleIndex)}'</Text>
</View>
</TouchableHighlight>
</View>
@@ -138,13 +138,13 @@ const StatusBarExample = React.createClass({
this._showHideTransitionIndex++;
this.setState({
showHideTransition:
this._getValue(showHideTransitions, this._showHideTransitionIndex),
getValue(showHideTransitions, this._showHideTransitionIndex),
});
}}>
<View style={styles.button}>
<Text>
showHideTransition:
'{this._getValue(showHideTransitions, this._showHideTransitionIndex)}'
'{getValue(showHideTransitions, this._showHideTransitionIndex)}'
</Text>
</View>
</TouchableHighlight>
@@ -155,10 +155,10 @@ const StatusBarExample = React.createClass({
style={styles.wrapper}
onPress={() => {
this._colorIndex++;
this.setState({backgroundColor: this._getValue(colors, this._colorIndex)});
this.setState({backgroundColor: getValue(colors, this._colorIndex)});
}}>
<View style={styles.button}>
<Text>backgroundColor: '{this._getValue(colors, this._colorIndex)}'</Text>
<Text>backgroundColor: '{getValue(colors, this._colorIndex)}'</Text>
</View>
</TouchableHighlight>
</View>
@@ -181,11 +181,116 @@ const StatusBarExample = React.createClass({
},
});
const StatusBarStaticExample = React.createClass({
_colorIndex: 0,
_barStyleIndex: 0,
_showHideTransitionIndex: 0,
getInitialState() {
return {
backgroundColor: getValue(colors, 0),
barStyle: getValue(barStyles, 0),
hidden: false,
networkActivityIndicatorVisible: false,
translucent: false,
};
},
render() {
return (
<View>
<View>
<TouchableHighlight
style={styles.wrapper}
onPress={() => {
const hidden = !this.state.hidden;
StatusBar.setHidden(hidden, 'slide');
this.setState({hidden});
}}>
<View style={styles.button}>
<Text>hidden: {this.state.hidden ? 'true' : 'false'}</Text>
</View>
</TouchableHighlight>
</View>
<Text style={styles.title}>iOS</Text>
<View>
<TouchableHighlight
style={styles.wrapper}
onPress={() => {
this._barStyleIndex++;
const barStyle = getValue(barStyles, this._barStyleIndex);
StatusBar.setBarStyle(barStyle, true);
this.setState({barStyle});
}}>
<View style={styles.button}>
<Text>style: '{getValue(barStyles, this._barStyleIndex)}'</Text>
</View>
</TouchableHighlight>
</View>
<View>
<TouchableHighlight
style={styles.wrapper}
onPress={() => {
const networkActivityIndicatorVisible = !this.state.networkActivityIndicatorVisible;
StatusBar.setNetworkActivityIndicatorVisible(networkActivityIndicatorVisible);
this.setState({networkActivityIndicatorVisible});
}}>
<View style={styles.button}>
<Text>
networkActivityIndicatorVisible:
{this.state.networkActivityIndicatorVisible ? 'true' : 'false'}
</Text>
</View>
</TouchableHighlight>
</View>
<Text style={styles.title}>Android</Text>
<View>
<TouchableHighlight
style={styles.wrapper}
onPress={() => {
this._colorIndex++;
const backgroundColor = getValue(colors, this._colorIndex);
StatusBar.setBackgroundColor(backgroundColor, true);
this.setState({backgroundColor});
}}>
<View style={styles.button}>
<Text>backgroundColor: '{getValue(colors, this._colorIndex)}'</Text>
</View>
</TouchableHighlight>
</View>
<View>
<TouchableHighlight
style={styles.wrapper}
onPress={() => {
const translucent = !this.state.translucent;
const backgroundColor = !this.state.translucent ? 'rgba(0, 0, 0, 0.4)' : 'black';
StatusBar.setTranslucent(translucent);
StatusBar.setBackgroundColor(backgroundColor, true);
this.setState({
translucent,
backgroundColor,
});
}}>
<View style={styles.button}>
<Text>translucent: {this.state.translucent ? 'true' : 'false'}</Text>
</View>
</TouchableHighlight>
</View>
</View>
);
},
});
exports.examples = [{
title: 'Status Bar',
title: 'StatusBar',
render() {
return <StatusBarExample />;
},
}, {
title: 'StatusBar static API',
render() {
return <StatusBarStaticExample />;
},
}];
var styles = StyleSheet.create({