Clean up UIExplorer and seperate RCTRootView examples

Reviewed By: nicklockwood

Differential Revision: D2951030

fb-gh-sync-id: e7cf64035d8e9e30aafe8b4944b6a20e4bc55078
shipit-source-id: e7cf64035d8e9e30aafe8b4944b6a20e4bc55078
This commit is contained in:
Eric Vicenti
2016-02-19 16:55:07 -08:00
committed by facebook-github-bot-5
parent 9294c6f5d4
commit 2b46fd424d
5 changed files with 136 additions and 119 deletions

View File

@@ -16,8 +16,8 @@
*/
'use strict';
var React = require('react-native');
var {
const React = require('react-native');
const {
AppRegistry,
BackAndroid,
Dimensions,
@@ -27,29 +27,32 @@ var {
View,
StatusBar,
} = React;
var UIExplorerList = require('./UIExplorerList.android');
const UIExplorerList = require('./UIExplorerList.android');
var DRAWER_WIDTH_LEFT = 56;
const DRAWER_WIDTH_LEFT = 56;
var UIExplorerApp = React.createClass({
getInitialState: function() {
return {
class UIExplorerApp extends React.Component {
constructor(props) {
super(props);
this.onSelectExample = this.onSelectExample.bind(this);
this._handleBackButtonPress = this._handleBackButtonPress.bind(this);
this.state = {
example: this._getUIExplorerHome(),
};
},
}
_getUIExplorerHome: function() {
_getUIExplorerHome() {
return {
title: 'UIExplorer',
component: this._renderHome(),
};
},
}
componentWillMount: function() {
componentWillMount() {
BackAndroid.addEventListener('hardwareBackPress', this._handleBackButtonPress);
},
}
render: function() {
render() {
return (
<DrawerLayoutAndroid
drawerPosition={DrawerLayoutAndroid.positions.Left}
@@ -59,19 +62,19 @@ var UIExplorerApp = React.createClass({
renderNavigationView={this._renderNavigationView}>
{this._renderNavigation()}
</DrawerLayoutAndroid>
);
},
);
}
_renderNavigationView: function() {
_renderNavigationView() {
return (
<UIExplorerList
onSelectExample={this.onSelectExample}
isInDrawer={true}
/>
);
},
}
onSelectExample: function(example) {
onSelectExample(example) {
this.drawer.closeDrawer();
if (example.title === this._getUIExplorerHome().title) {
example = this._getUIExplorerHome();
@@ -79,10 +82,10 @@ var UIExplorerApp = React.createClass({
this.setState({
example: example,
});
},
}
_renderHome: function() {
var onSelectExample = this.onSelectExample;
_renderHome() {
const onSelectExample = this.onSelectExample;
return React.createClass({
render: function() {
return (
@@ -93,10 +96,10 @@ var UIExplorerApp = React.createClass({
);
}
});
},
}
_renderNavigation: function() {
var Component = this.state.example.component;
_renderNavigation() {
const Component = this.state.example.component;
return (
<View style={styles.container}>
<StatusBar
@@ -114,9 +117,9 @@ var UIExplorerApp = React.createClass({
/>
</View>
);
},
}
_handleBackButtonPress: function() {
_handleBackButtonPress() {
if (
this._exampleRef &&
this._exampleRef.handleBackAction &&
@@ -129,10 +132,11 @@ var UIExplorerApp = React.createClass({
return true;
}
return false;
},
});
}
var styles = StyleSheet.create({
}
const styles = StyleSheet.create({
container: {
flex: 1,
},