代码完成

Example/index.android.js

@@ -1,53 +1,3 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- * @flow
- */
+import TreeExample from './src/index';
 
-import React, { Component } from 'react';
-import {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native';
-
-export default class TreeExample extends Component {
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.android.js
-        </Text>
-        <Text style={styles.instructions}>
-          Double tap R on your keyboard to reload,{'\n'}
-          Shake or press menu button for dev menu
-        </Text>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-});
-
-AppRegistry.registerComponent('TreeExample', () => TreeExample);
+TreeExample('android');

Example/index.ios.js

@@ -1,53 +1,3 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- * @flow
- */
+import TreeExample from './src/index';
 
-import React, { Component } from 'react';
-import {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native';
-
-export default class TreeExample extends Component {
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.ios.js
-        </Text>
-        <Text style={styles.instructions}>
-          Press Cmd+R to reload,{'\n'}
-          Cmd+D or shake for dev menu
-        </Text>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-});
-
-AppRegistry.registerComponent('TreeExample', () => TreeExample);
+TreeExample('ios');

Example/scr/components/TestTree.js

@@ -0,0 +1,59 @@
+export default class TestTree extends Component {
+    constructor() {
+        super();
+        this.state = {
+            isOpen: false,
+            selectedKeys: [],
+            expandedKeys: [],
+        }
+    }
+    render() {
+        let menu = <View style={{backgroundColor: '#F5F5F9'}}>
+            <ScrollView style={styles.tree}>
+                <TreeView
+                    showLine
+                    defaultExpandRoot
+                    defaultSelectedKeys = {this.state.selectedKeys}
+                    defaultExpandedKeys = {this.state.expandedKeys}
+                    onSelect={value = this.setState({selectedKeys: value}) }
+                    onExpand={value = this.setState({expandedKeys: value}) }
+                    treeData={[]}
+                />
+             </ScrollView>
+        </View>
+        return (<View style={{flex: 1, marginTop: 50}}>                   
+            <SideMenu
+                menu={this.state.isOpen && menu}
+                isOpen={this.state.isOpen}
+                openMenuOffset={ScreenWidth / 5 * 4}
+                onChange={(isOpen) => {this.setState({isOpen: isOpen})}}
+            >
+            <View style={styles.flexRow}>
+                <View style={styles.content}>
+                    <TouchableOpacity onPress={() => {this.setState({isOpen:!this.state.isOpen})}}
+                    >
+                        <Icon name="navicon" size={22}  />
+                    </TouchableOpacity>
+                </View>  
+                <View style={{width: ScreenWidth - 40}}>                  
+                    <Text style={{fontSize: 18}}>点击菜单图标</Text>                    
+                </View>  
+            </View>        
+            </SideMenu> 
+        </View>)
+    }
+}
+
+const styles = {
+    tree: {
+        padding: 10,
+        height: ScreenHeight - 90,
+    },
+    content: {
+        flex:1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#EFEFF4'
+    }
+}

Example/scr/components/TestTreeSelect.js

@@ -0,0 +1,7 @@
+export default class TestTreeSelect extends React.Component {
+    render () {
+        return <View style={{flex:1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}>
+            <Text style={{fontSize: 20}}>什么都没有</Text>
+        </View>
+    }
+}

Example/scr/globals.js

@@ -0,0 +1,26 @@
+import React, { PropTypes, Component } from 'react';
+import { Router, Scene, TabBar, Actions } from 'react-native-router-flux';
+import {
+  AppRegistry, Text, View, ScrollView, TouchableHighlight, TouchableOpacity
+} from 'react-native';
+const SideMenu = require('react-native-side-menu');
+import Icon from 'react-native-vector-icons/FontAwesome';
+
+global.Icon = Icon;
+global.SideMenu = SideMenu;
+global.React = React;
+global.PropTypes = PropTypes;
+global.Component = Component;
+global.Router = Router;
+global.Scene = Scene;
+global.TabBar = TabBar;
+global.Actions = Actions;
+global.AppRegistry = AppRegistry;
+global.Text = Text;
+global.View = View;
+global.ScrollView = ScrollView;
+global.TouchableHighlight = TouchableHighlight;
+global.TouchableOpacity = TouchableOpacity;
+
+global.ScreenWidth = Dimensions.get('window').width;
+global.ScreenHeight = Dimensions.get('window').height;

Example/scr/index.js

@@ -0,0 +1,10 @@
+// 导入全局变量
+import './globals' 
+// 路由
+import Router from './router';
+
+export default function native(platform) {
+    // 将平台设为全局变量
+    global.PLATFORM = platform;
+    AppRegistry.registerComponent('TreeExample', () => Router);
+}

Example/scr/router.js

@@ -0,0 +1,36 @@
+import TestTree from './components/TestTree'
+import TestTreeSelect from './components/TestTreeSelect'
+class ExampleRouter extends Component {
+    constructor() {
+        super();
+    }
+
+    render() {
+        return (
+            <Router hideNavBar={false}>
+                <Scene key="Tabbar"
+                    tabs={true}
+                    initial={true}
+                    tabBarStyle={{ backgroundColor: '#11ADF0' }}
+                    tabBarSelectedItemStyle={{ backgroundColor: '#01A7F1' }}
+                    default="tree"
+                >
+                    <Scene
+                        key="tree"
+                        hideNavBar
+                        component={TestTree}
+                    />
+                    <Scene
+                        key="tree_select"
+                        hideNavBar
+                        component={testTreeSelect}
+                    />
+                </Scene>
+
+
+            </Router>
+        )
+    }
+}
+
+export default ExampleRouter;