mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-04-01 13:03:08 +08:00
Cleanup UIExplorer folder
Summary: Move all JS to a js/ subfolder so we get some overview of this folder again. Reviewed By: bestander Differential Revision: D3542598 fbshipit-source-id: 7637133fe4152f4d39e461b443b38510272d5bc8
This commit is contained in:
Pieter De Baets
committed by
Facebook Github Bot 2
Facebook Github Bot 2
parent
7b7ecdf337
commit
2f73ca8f76
476
Examples/UIExplorer/js/StatusBarExample.js
Normal file
476
Examples/UIExplorer/js/StatusBarExample.js
Normal file
@@ -0,0 +1,476 @@
|
||||
/**
|
||||
* Copyright (c) 2013-present, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*
|
||||
* The examples provided by Facebook are for non-commercial testing and
|
||||
* evaluation purposes only.
|
||||
*
|
||||
* Facebook reserves all rights not expressly granted.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
|
||||
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
|
||||
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
|
||||
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*
|
||||
* @flow
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const ReactNative = require('react-native');
|
||||
const {
|
||||
StatusBar,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableHighlight,
|
||||
View,
|
||||
} = ReactNative;
|
||||
|
||||
exports.framework = 'React';
|
||||
exports.title = '<StatusBar>';
|
||||
exports.description = 'Component for controlling the status bar';
|
||||
|
||||
const colors = [
|
||||
'#ff0000',
|
||||
'#00ff00',
|
||||
'#0000ff',
|
||||
];
|
||||
|
||||
const barStyles = [
|
||||
'default',
|
||||
'light-content',
|
||||
];
|
||||
|
||||
const showHideTransitions = [
|
||||
'fade',
|
||||
'slide',
|
||||
];
|
||||
|
||||
function getValue<T>(values: Array<T>, index: number): T {
|
||||
return values[index % values.length];
|
||||
}
|
||||
|
||||
const StatusBarHiddenExample = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
animated: true,
|
||||
hidden: false,
|
||||
showHideTransition: getValue(showHideTransitions, 0),
|
||||
};
|
||||
},
|
||||
|
||||
_showHideTransitionIndex: 0,
|
||||
|
||||
_onChangeAnimated() {
|
||||
this.setState({animated: !this.state.animated});
|
||||
},
|
||||
|
||||
_onChangeHidden() {
|
||||
this.setState({hidden: !this.state.hidden});
|
||||
},
|
||||
|
||||
_onChangeTransition() {
|
||||
this._showHideTransitionIndex++;
|
||||
this.setState({
|
||||
showHideTransition: getValue(showHideTransitions, this._showHideTransitionIndex),
|
||||
});
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<StatusBar
|
||||
hidden={this.state.hidden}
|
||||
showHideTransition={this.state.showHideTransition}
|
||||
animated={this.state.animated}
|
||||
/>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={this._onChangeHidden}>
|
||||
<View style={styles.button}>
|
||||
<Text>hidden: {this.state.hidden ? 'true' : 'false'}</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={this._onChangeAnimated}>
|
||||
<View style={styles.button}>
|
||||
<Text>animated (ios only): {this.state.animated ? 'true' : 'false'}</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={this._onChangeTransition}>
|
||||
<View style={styles.button}>
|
||||
<Text>
|
||||
showHideTransition (ios only):
|
||||
'{getValue(showHideTransitions, this._showHideTransitionIndex)}'
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
const StatusBarStyleExample = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
animated: true,
|
||||
barStyle: getValue(barStyles, this._barStyleIndex),
|
||||
};
|
||||
},
|
||||
|
||||
_barStyleIndex: 0,
|
||||
|
||||
_onChangeBarStyle() {
|
||||
this._barStyleIndex++;
|
||||
this.setState({barStyle: getValue(barStyles, this._barStyleIndex)});
|
||||
},
|
||||
|
||||
_onChangeAnimated() {
|
||||
this.setState({animated: !this.state.animated});
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<StatusBar
|
||||
animated={this.state.animated}
|
||||
barStyle={this.state.barStyle}
|
||||
/>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={this._onChangeBarStyle}>
|
||||
<View style={styles.button}>
|
||||
<Text>style: '{getValue(barStyles, this._barStyleIndex)}'</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={this._onChangeAnimated}>
|
||||
<View style={styles.button}>
|
||||
<Text>animated: {this.state.animated ? 'true' : 'false'}</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
const StatusBarNetworkActivityExample = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
networkActivityIndicatorVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
_onChangeNetworkIndicatorVisible() {
|
||||
this.setState({
|
||||
networkActivityIndicatorVisible: !this.state.networkActivityIndicatorVisible,
|
||||
});
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<StatusBar
|
||||
networkActivityIndicatorVisible={this.state.networkActivityIndicatorVisible}
|
||||
/>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={this._onChangeNetworkIndicatorVisible}>
|
||||
<View style={styles.button}>
|
||||
<Text>
|
||||
networkActivityIndicatorVisible:
|
||||
{this.state.networkActivityIndicatorVisible ? 'true' : 'false'}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
const StatusBarBackgroundColorExample = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
animated: true,
|
||||
backgroundColor: getValue(colors, 0),
|
||||
};
|
||||
},
|
||||
|
||||
_colorIndex: 0,
|
||||
|
||||
_onChangeBackgroundColor() {
|
||||
this._colorIndex++;
|
||||
this.setState({backgroundColor: getValue(colors, this._colorIndex)});
|
||||
},
|
||||
|
||||
_onChangeAnimated() {
|
||||
this.setState({animated: !this.state.animated});
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<StatusBar
|
||||
backgroundColor={this.state.backgroundColor}
|
||||
animated={this.state.animated}
|
||||
/>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={this._onChangeBackgroundColor}>
|
||||
<View style={styles.button}>
|
||||
<Text>backgroundColor: '{getValue(colors, this._colorIndex)}'</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={this._onChangeAnimated}>
|
||||
<View style={styles.button}>
|
||||
<Text>animated: {this.state.animated ? 'true' : 'false'}</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
const StatusBarTranslucentExample = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
translucent: false,
|
||||
};
|
||||
},
|
||||
|
||||
_onChangeTranslucent() {
|
||||
this.setState({
|
||||
translucent: !this.state.translucent,
|
||||
});
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<StatusBar
|
||||
translucent={this.state.translucent}
|
||||
/>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={this._onChangeTranslucent}>
|
||||
<View style={styles.button}>
|
||||
<Text>translucent: {this.state.translucent ? 'true' : 'false'}</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
const StatusBarStaticIOSExample = React.createClass({
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={() => {
|
||||
StatusBar.setHidden(true, 'slide');
|
||||
}}>
|
||||
<View style={styles.button}>
|
||||
<Text>setHidden(true, 'slide')</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={() => {
|
||||
StatusBar.setHidden(false, 'fade');
|
||||
}}>
|
||||
<View style={styles.button}>
|
||||
<Text>setHidden(false, 'fade')</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={() => {
|
||||
StatusBar.setBarStyle('default', true);
|
||||
}}>
|
||||
<View style={styles.button}>
|
||||
<Text>setBarStyle('default', true)</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={() => {
|
||||
StatusBar.setBarStyle('light-content', true);
|
||||
}}>
|
||||
<View style={styles.button}>
|
||||
<Text>setBarStyle('light-content', true)</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={() => {
|
||||
StatusBar.setNetworkActivityIndicatorVisible(true);
|
||||
}}>
|
||||
<View style={styles.button}>
|
||||
<Text>setNetworkActivityIndicatorVisible(true)</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={() => {
|
||||
StatusBar.setNetworkActivityIndicatorVisible(false);
|
||||
}}>
|
||||
<View style={styles.button}>
|
||||
<Text>setNetworkActivityIndicatorVisible(false)</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
const StatusBarStaticAndroidExample = React.createClass({
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={() => {
|
||||
StatusBar.setHidden(true);
|
||||
}}>
|
||||
<View style={styles.button}>
|
||||
<Text>setHidden(true)</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={() => {
|
||||
StatusBar.setHidden(false);
|
||||
}}>
|
||||
<View style={styles.button}>
|
||||
<Text>setHidden(false)</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={() => {
|
||||
StatusBar.setBackgroundColor('#ff00ff', true);
|
||||
}}>
|
||||
<View style={styles.button}>
|
||||
<Text>setBackgroundColor('#ff00ff', true)</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={() => {
|
||||
StatusBar.setBackgroundColor('#00ff00', true);
|
||||
}}>
|
||||
<View style={styles.button}>
|
||||
<Text>setBackgroundColor('#00ff00', true)</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={() => {
|
||||
StatusBar.setTranslucent(true);
|
||||
StatusBar.setBackgroundColor('rgba(0, 0, 0, 0.4)', true);
|
||||
}}>
|
||||
<View style={styles.button}>
|
||||
<Text>setTranslucent(true) and setBackgroundColor('rgba(0, 0, 0, 0.4)', true)</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
<TouchableHighlight
|
||||
style={styles.wrapper}
|
||||
onPress={() => {
|
||||
StatusBar.setTranslucent(false);
|
||||
StatusBar.setBackgroundColor('black', true);
|
||||
}}>
|
||||
<View style={styles.button}>
|
||||
<Text>setTranslucent(false) and setBackgroundColor('black', true)</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
const examples = [{
|
||||
title: 'StatusBar hidden',
|
||||
render() {
|
||||
return <StatusBarHiddenExample />;
|
||||
},
|
||||
}, {
|
||||
title: 'StatusBar style',
|
||||
render() {
|
||||
return <StatusBarStyleExample />;
|
||||
},
|
||||
platform: 'ios',
|
||||
}, {
|
||||
title: 'StatusBar network activity indicator',
|
||||
render() {
|
||||
return <StatusBarNetworkActivityExample />;
|
||||
},
|
||||
platform: 'ios',
|
||||
}, {
|
||||
title: 'StatusBar background color',
|
||||
render() {
|
||||
return <StatusBarBackgroundColorExample />;
|
||||
},
|
||||
platform: 'android',
|
||||
}, {
|
||||
title: 'StatusBar background color',
|
||||
render() {
|
||||
return <StatusBarTranslucentExample />;
|
||||
},
|
||||
platform: 'android',
|
||||
}, {
|
||||
title: 'StatusBar static API',
|
||||
render() {
|
||||
return <StatusBarStaticIOSExample />;
|
||||
},
|
||||
platform: 'ios',
|
||||
}, {
|
||||
title: 'StatusBar static API',
|
||||
render() {
|
||||
return <StatusBarStaticAndroidExample />;
|
||||
},
|
||||
platform: 'android',
|
||||
}, {
|
||||
title: 'StatusBar dimensions',
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<Text>Height: {StatusBar.currentHeight} pts</Text>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
platform: 'android',
|
||||
}];
|
||||
|
||||
exports.examples = examples;
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
wrapper: {
|
||||
borderRadius: 5,
|
||||
marginBottom: 5,
|
||||
},
|
||||
button: {
|
||||
borderRadius: 5,
|
||||
backgroundColor: '#eeeeee',
|
||||
padding: 10,
|
||||
},
|
||||
title: {
|
||||
marginTop: 16,
|
||||
marginBottom: 8,
|
||||
fontWeight: 'bold',
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user