update

yj1438 · yj1438 · commit 4cbcb3d2b842 · 2016-08-12T15:50:23.000+08:00
diff --git a/ios/RnProject/AppDelegate.m b/ios/RnProject/AppDelegate.m
@@ -19,10 +19,10 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
   NSURL *jsCodeLocation;
 
   [[RCTBundleURLProvider sharedSettings] setDefaults];
-  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
+  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"/rn/app" fallbackResource:nil];
 
   RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
-                                                      moduleName:@"RnProject"
+                                                      moduleName:@"Demo"
                                                initialProperties:nil
                                                    launchOptions:launchOptions];
   rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
diff --git a/ios/RnProject/Base.lproj/LaunchScreen.xib b/ios/RnProject/Base.lproj/LaunchScreen.xib
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="7702" systemVersion="14D136" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="10117" systemVersion="15G31" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="7701"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="10085"/>
         <capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
     </dependencies>
     <objects>
diff --git a/rn/app.js b/rn/app.js
@@ -9,19 +9,9 @@ import {
     Text
 } from 'react-native';
 
-import Route from './route';
-
-let NavigatorBarMap = {
-    LeftButton(route, navigator, index, navState) {
-        return (<Text>Cancel</Text>); 
-    },
-    RightButton(route, navigator, index, navState) { 
-        return (<Text>Done</Text>); 
-    },
-    Title(route, navigator, index, navState) {
-        return (<Text>Awesome Nav Bar</Text>); 
-    }
-};
+import Route from './base/route';
+import NavigationBarMap from './base/navigationBar';
+import goBack from './common/goBack';
 
 class App extends React.Component {
 
@@ -31,13 +21,7 @@ class App extends React.Component {
         this.navigator = null;
         //
         BackAndroid.addEventListener('hardwareBackPress', () => {
-            // Alert.alert('alert', this.navigator + this.route.id);
-            if (this.navigator && this.navigator.getCurrentRoutes().length > 1) {
-                this.navigator.pop();
-                return true;
-            }
-            BackAndroid.exitApp();
-            return false;
+            return goBack(this.navigator);
         });
     }
 
@@ -65,14 +49,11 @@ class App extends React.Component {
                     Navigator.SceneConfigs.FloatFromRight
                     // Navigator.SceneConfigs.FadeAndroid
                 }
+                sceneStyle={{flex: 1, top: 40}}
                 navigationBar={
-                    // <Navigator.NavigationBar
-                    //     routeMapper={NavigatorBarMap}
-                    //     style={{height: 80}}
-                    // />
                     <Navigator.NavigationBar
-                        routeMapper={NavigatorBarMap}
-                        style={{backgroundColor: 'gray', flex: 1, height: 20}}
+                        routeMapper={NavigationBarMap}
+                        style={{backgroundColor: 'gray', marginTop: 0, height: 40, top: 0}}
                     />
                 }
             />
diff --git a/rn/base/navigationBar.js b/rn/base/navigationBar.js
@@ -0,0 +1,76 @@
+'use strict';
+import React from 'react';
+import {
+    View,
+    TouchableOpacity,
+    Text,
+    StyleSheet,
+    Dimensions,
+    BackAndroid,
+    Alert
+} from 'react-native';
+
+import goBack from '../common/goBack';
+
+// navigationBar 的固定left\title\right 布局好诡异，只能用算的了，flex 各种问题
+const screenWidth = Dimensions.get('window').width,
+    btnWidth = 68;
+
+const styles = StyleSheet.create({
+    btn: {
+        height: 30,
+        // borderWidth: 1,
+        top: 0,
+        marginVertical: 5
+        
+    },
+    title: {
+        flex: 1,
+        width: screenWidth - 4 * 2 - btnWidth * 2,
+        // borderWidth: 1,
+        alignSelf: 'stretch',
+        justifyContent: 'center'
+    },
+    text: {
+        textAlign: 'center',
+        fontSize: 16
+    },
+    fix: {
+        marginTop: 17
+    },
+    btnText: {
+        fontSize: 16,
+        marginTop: 3
+    }
+});
+
+const NavigationBar = {
+
+    Title(route, navigator, index, navState) {
+        return (
+            <View style={[styles.title, styles.fix]}>
+                <Text style={styles.text}>{route.id} + {index}</Text>
+            </View>
+        ); 
+    },
+    LeftButton(route, navigator, index, navState) {
+        return (
+            <TouchableOpacity style={[styles.btn]} onPress={() => {
+                goBack(navigator);
+            }}>
+                <Text style={[styles.btnText, {textAlign: 'left'}]}>Back</Text>
+            </TouchableOpacity>
+        ); 
+    },
+    RightButton(route, navigator, index, navState) { 
+        return (
+            <TouchableOpacity style={[styles.btn]} onPress={() => {
+                Alert.alert('options', 'this is some operation.');
+            }}>
+                <Text style={[styles.btnText, {textAlign: 'right'}]}>选项</Text>
+            </TouchableOpacity>
+        ); 
+    }
+}
+
+export default NavigationBar;
diff --git a/rn/base/route.js b/rn/base/route.js
@@ -2,14 +2,14 @@
 import React from 'react';
 
 // 引入用到的所有模板
-import Homepage from './components/homepage';
-import Index from './components/index';
-import Detail from './components/detail';
-import Error from './components/error';
+import Homepage from '../components/homepage';
+import Index from '../components/index';
+import Detail from '../components/detail';
+import Error from '../components/error';
 
 /*
  * 路由配置项
- * 可配置默认参数 params ，配合 this.props 的限制可使代码更严谨
+ * 可配置默认参数 props: params ，配合 this.props 的限制可使代码更严谨
  */
 const RouteMap = {
     'homepage': {index: 0, component: Homepage, params: {}},
@@ -58,7 +58,7 @@ class Route {
             Object.assign(params, routeObj.params);
         } else {
             Component = Error;
-            params = {};
+            params = {message: '当前页面没有找到：' + id};
         }
         return <Component navigator={navigator} {...params} />;
     }     
diff --git a/rn/common/goBack.js b/rn/common/goBack.js
@@ -0,0 +1,14 @@
+'use strict';
+
+import {
+    BackAndroid
+} from 'react-native';
+
+export default function (navigator) {
+    if (navigator && navigator.getCurrentRoutes().length > 1) {
+        navigator.pop();
+        return true;
+    }
+    BackAndroid.exitApp();
+    return false;
+}
diff --git a/rn/components/detail/index.js b/rn/components/detail/index.js
@@ -1,7 +1,9 @@
+'use strict';
 import React, {Component, PropTypes} from 'react';
 import {
     View,
-    Text
+    Text,
+    TouchableOpacity
 } from 'react-native';
 
 class Detail extends Component {
@@ -10,32 +12,11 @@ class Detail extends Component {
 
     }
 
-    componentWillMount() {
-        
-    }
-
-    componentDidMount() {
-
-    }
-
-    componentWillReceiveProps(nextProps) {
-
-    }
-
-    shouldComponentUpdate(nextProps, nextState) {
-
-    }
-
-    componentWillUpdate(nextProps, nextState) {
-
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-
-    }
-
-    componentWillUnmount() {
-
+    _gotoPage() {
+        this.props.navigator.push({
+            id: 'nopage',
+            params: {}
+        });
     }
 
     render() {
@@ -45,6 +26,11 @@ class Detail extends Component {
                 <Text>
                     {new Date(this.props.ts).toLocaleDateString()}
                 </Text>
+                <TouchableOpacity onPress={this._gotoPage.bind(this)}>
+                    <Text>
+                        click this to a unretched page!
+                    </Text>
+                </TouchableOpacity>
             </View>
         );
     }
diff --git a/rn/components/error/index.js b/rn/components/error/index.js
@@ -1,53 +1,54 @@
+'use strict';
 import React, {Component, PropTypes} from 'react';
 import {
     View,
     Text
 } from 'react-native';
 
-class componentName extends Component {
+class Error extends Component {
     constructor(props) {
         super(props);
     }
 
-    componentWillMount() {
+    // componentWillMount() {
 
-    }
+    // }
 
-    componentDidMount() {
+    // componentDidMount() {
 
-    }
+    // }
 
-    componentWillReceiveProps(nextProps) {
+    // componentWillReceiveProps(nextProps) {
 
-    }
+    // }
 
-    shouldComponentUpdate(nextProps, nextState) {
+    // shouldComponentUpdate(nextProps, nextState) {
 
-    }
+    // }
 
-    componentWillUpdate(nextProps, nextState) {
+    // componentWillUpdate(nextProps, nextState) {
 
-    }
+    // }
 
-    componentDidUpdate(prevProps, prevState) {
+    // componentDidUpdate(prevProps, prevState) {
 
-    }
+    // }
 
-    componentWillUnmount() {
+    // componentWillUnmount() {
 
-    }
+    // }
 
     render() {
         return (
             <View>
-                <Text>页面没有找到...</Text>
+                <Text>{this.props.message}</Text>
             </View>
         );
     }
 }
 
-componentName.propTypes = {
-
+Error.propTypes = {
+    message: PropTypes.string.isRequired
 };
 
-export default componentName;
+export default Error;
diff --git a/rn/components/homepage/index.js b/rn/components/homepage/index.js
@@ -6,15 +6,13 @@ import {
     View,
     Text,
     ScrollView,
-    TouchableOpacity,
-    Dimensions
+    TouchableOpacity
 } from 'react-native';
 
 import List from './list';
 
 const styles = StyleSheet.create({
     wrapper: {
-        marginTop: 20,
         flex: 1,
         backgroundColor: 'red'
     },
@@ -58,7 +56,7 @@ class Homepage extends React.Component {
                 {
                     ['1','2','3'].map((value, index) => {
                         return (
-                            <List key={value} cont={value} navigator={this.props.navigator}/>
+                            <List key={value} num={value} navigator={this.props.navigator}/>
                         );
                     })
                 }
diff --git a/rn/components/homepage/list.js b/rn/components/homepage/list.js
@@ -1,3 +1,4 @@
+'use strict';
 import React, {Component, PropTypes} from 'react';
 import {
     View,
@@ -27,7 +28,7 @@ class List extends Component {
     _gotoIndex () {
         this.props.navigator.push({
             id: 'index',
-            params: {desc: 'this is indexpage from ' + this.props.cont + '!'}
+            params: {desc: 'this is indexpage from ' + this.props.num + '!'}
         });
     }
 
@@ -36,7 +37,7 @@ class List extends Component {
             <View style={styles.page}>
                 <TouchableOpacity onPress={this._gotoIndex.bind(this)}>
                     <Text>
-                        This is page : {this.props.cont}
+                        This is page : {this.props.num}
                     </Text>
                 </TouchableOpacity>
             </View>
@@ -45,7 +46,7 @@ class List extends Component {
 }
 
 List.propTypes = {
-    cont: PropTypes.string.isRequired
+    num: PropTypes.string.isRequired
 }
 
 export default List;
