kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-02-11 09:11:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

Adopt NavigationExperimental in UIExplorer

Browse Source 
Summary:Use the new Navigation library to make the UIExplorer navigation more flexible.

Deep linking examples are coming soon (hint: we just need to convert URIs to UIExplorerActions!)

Reviewed By: javache

Differential Revision: D2798050

fb-gh-sync-id: c7775393e2d7a30a161d0770192309567dcc8b0c
shipit-source-id: c7775393e2d7a30a161d0770192309567dcc8b0c
This commit is contained in:
Eric Vicenti
2016-02-22 16:15:35 -08:00
committed by facebook-github-bot-6
parent 2551540540
commit 876ecb291f
16 changed files with 1074 additions and 605 deletions
Download Patch File Download Diff File Expand all files Collapse all files

251
Examples/UIExplorer/UIExplorerList.android.js
View File

@@ -15,102 +15,167 @@
*/
'use strict';
var React = require('react-native');
var {
StyleSheet,
View,
} = React;
var UIExplorerListBase = require('./UIExplorerListBase');
var COMPONENTS = [
require('./ImageExample'),
require('./ListViewExample'),
require('./PickerAndroidExample'),
require('./ProgressBarAndroidExample'),
require('./RefreshControlExample'),
require('./ScrollViewSimpleExample'),
require('./StatusBarExample'),
require('./SwitchExample'),
require('./TextExample.android'),
require('./TextInputExample.android'),
require('./ToolbarAndroidExample'),
require('./TouchableExample'),
require('./ViewExample'),
require('./ViewPagerAndroidExample.android'),
require('./WebViewExample'),
];
var APIS = [
require('./AccessibilityAndroidExample.android'),
require('./AlertExample').AlertExample,
require('./AppStateExample'),
require('./BorderExample'),
require('./CameraRollExample'),
require('./ClipboardExample'),
require('./DatePickerAndroidExample'),
require('./GeolocationExample'),
require('./ImageEditingExample'),
require('./IntentAndroidExample.android'),
require('./LayoutEventsExample'),
require('./LayoutExample'),
require('./NavigationExperimental/NavigationExperimentalExample'),
require('./NetInfoExample'),
require('./PanResponderExample'),
require('./PointerEventsExample'),
require('./TimePickerAndroidExample'),
require('./TimerExample'),
require('./ToastAndroidExample.android'),
require('./XHRExample'),
];
type Props = {
onSelectExample: Function,
isInDrawer: bool,
export type UIExplorerExample = {
key: string;
module: React.Component;
};
class UIExplorerList extends React.Component {
props: Props;
render() {
return (
<UIExplorerListBase
components={COMPONENTS}
apis={APIS}
searchText=""
renderAdditionalView={this.renderAdditionalView.bind(this)}
onPressRow={this.onPressRow.bind(this)}
/>
);
}
renderAdditionalView(renderRow, renderTextInput): React.Component {
if (this.props.isInDrawer) {
var homePage = renderRow({
title: 'UIExplorer',
description: 'List of examples',
}, -1);
return (
<View>
{homePage}
</View>
);
}
return renderTextInput(styles.searchTextInput);
}
onPressRow(example: any) {
var Component = UIExplorerListBase.makeRenderable(example);
this.props.onSelectExample({
title: Component.title,
component: Component,
});
}
}
var styles = StyleSheet.create({
searchTextInput: {
padding: 2,
var ComponentExamples: Array<UIExplorerExample> = [
{
key: 'ImageExample',
module: require('./ImageExample'),
},
{
key: 'ListViewExample',
module: require('./ListViewExample'),
},
{
key: 'PickerAndroidExample',
module: require('./PickerAndroidExample'),
},
{
key: 'ProgressBarAndroidExample',
module: require('./ProgressBarAndroidExample'),
},
{
key: 'RefreshControlExample',
module: require('./RefreshControlExample'),
},
{
key: 'ScrollViewSimpleExample',
module: require('./ScrollViewSimpleExample'),
},
{
key: 'StatusBarExample',
module: require('./StatusBarExample'),
},
{
key: 'SwitchExample',
module: require('./SwitchExample'),
},
{
key: 'TextExample',
module: require('./TextExample'),
},
{
key: 'TextInputExample',
module: require('./TextInputExample'),
},
{
key: 'ToolbarAndroidExample',
module: require('./ToolbarAndroidExample'),
},
{
key: 'TouchableExample',
module: require('./TouchableExample'),
},
{
key: 'ViewExample',
module: require('./ViewExample'),
},
{
key: 'ViewPagerAndroidExample',
module: require('./ViewPagerAndroidExample'),
},
{
key: 'WebViewExample',
module: require('./WebViewExample'),
},
];
const APIExamples = [
{
key: 'AccessibilityAndroidExample',
module: require('./AccessibilityAndroidExample'),
},
{
key: 'AlertExample',
module: require('./AlertExample').AlertExample,
},
{
key: 'AppStateExample',
module: require('./AppStateExample'),
},
{
key: 'BorderExample',
module: require('./BorderExample'),
},
{
key: 'CameraRollExample',
module: require('./CameraRollExample'),
},
{
key: 'ClipboardExample',
module: require('./ClipboardExample'),
},
{
key: 'DatePickerAndroidExample',
module: require('./DatePickerAndroidExample'),
},
{
key: 'GeolocationExample',
module: require('./GeolocationExample'),
},
{
key: 'ImageEditingExample',
module: require('./ImageEditingExample'),
},
{
key: 'IntentAndroidExample',
module: require('./IntentAndroidExample'),
},
{
key: 'LayoutEventsExample',
module: require('./LayoutEventsExample'),
},
{
key: 'LayoutExample',
module: require('./LayoutExample'),
},
{
key: 'NavigationExperimentalExample',
module: require('./NavigationExperimental/NavigationExperimentalExample'),
},
{
key: 'NetInfoExample',
module: require('./NetInfoExample'),
},
{
key: 'PanResponderExample',
module: require('./PanResponderExample'),
},
{
key: 'PointerEventsExample',
module: require('./PointerEventsExample'),
},
{
key: 'TimePickerAndroidExample',
module: require('./TimePickerAndroidExample'),
},
{
key: 'TimerExample',
module: require('./TimerExample'),
},
{
key: 'ToastAndroidExample',
module: require('./ToastAndroidExample'),
},
{
key: 'XHRExample',
module: require('./XHRExample'),
},
];
const Modules = {};
APIExamples.concat(ComponentExamples).forEach(Example => {
Modules[Example.key] = Example.module;
});
const UIExplorerList = {
APIExamples,
ComponentExamples,
Modules,
};
module.exports = UIExplorerList;