props push

src/BasicNavigator/actions.js

@@ -7,9 +7,10 @@ export const PUSH = 'push';
 export const POP = 'pop';
 export const TAB = 'tab';
 // action creator
-export const push = (pageName: String = '') => ({
+export const push = (pageName: String = '', extProps) => ({
   type: PUSH,
   pageName,
+  extProps,
 });
 export const pop = (pageName: String = '') => ({
   type: POP,

src/BasicNavigator/navigationStack.js

@@ -84,6 +84,12 @@ const navigator = createStackNavigator({
 }, {
   initialRouteName,
   headerMode: 'none',
+  defaultNavigationOptions: {
+    gesturesEnabled: false,
+  },
+  disableKeyboardHandling: false,
+  cardShadowEnabled: true,
+  cardOverlayEnabled: true,
 });
 
 //export default navigator;

src/BasicNavigator/reducer.js

@@ -10,17 +10,18 @@ import { PUSH, POP, TAB } from './actions';
 
 const ActionForTab = NavigationStack.router.getActionForPathAndParams(initialRouteName);
 
-const ActionForNativePage = pageName => NavigationStack.router.getActionForPathAndParams(pageName);
+const ActionForNativePage = action => NavigationStack.router
+  .getActionForPathAndParams(action.pageName, action.extProps);
 
 const initialState = NavigationStack.router.getStateForAction(ActionForTab);
 
 const nav = (state = initialState, action) => {
   switch (action.type) {
   case PUSH:
-    return NavigationStack.router.getStateForAction(ActionForNativePage(action.pageName), state);
+    return NavigationStack.router.getStateForAction(ActionForNativePage(action), state);
   case POP:
     if (action.pageName) {
-      return NavigationStack.router.getStateForAction(ActionForNativePage(action.pageName), state);
+      return NavigationStack.router.getStateForAction(ActionForNativePage(action), state);
     }
     return NavigationStack.router.getStateForAction(NavigationActions.back(), state);
   case TAB:

src/MainApp.js

@@ -38,6 +38,7 @@ class MainApp extends Component {
     //console.log('handleAppChange:')
     if (currentAppState === 'active') {
       //checkForUpdate(true)
+      console.log('handleAppChange','active');
     }
   }
 

src/changeThemePage/index.js

@@ -21,6 +21,7 @@ import themeAction from '../theme/action';
 import NavigationBar from '../components/NavigationBar';
 import BackButton from '../components/BackButton';
 import Button from '../components/ThemeButton';
+import { NavigationEvents } from "react-navigation";
 
 type Props = {};
 const styles = StyleSheet.create({
@@ -37,8 +38,11 @@ const styles = StyleSheet.create({
 
 
 class ThemePage extends Component<Props> {
+
   render() {
     const { theme, setCurrentTheme } = this.props;
+    console.log('ThemePage:', this.props)
+    this.props.navigation.isFirstRouteInParent()
     return (
       <View style={styles.container}>
         <NavigationBar
@@ -66,6 +70,12 @@ class ThemePage extends Component<Props> {
           }}
           title="切换红色主题"
         />
+        <NavigationEvents
+          onWillFocus={payload => console.log('onWillFocus',payload)}
+          onDidFocus={() => console.log('onDidFocus')}
+          onWillBlur={payload => console.log('onWillBlur',payload)}
+          onDidBlur={payload => console.log('onDidBlur',payload)}
+        />
       </View>
     );
   }

src/components/NavigationBar/index.js

@@ -36,8 +36,6 @@ const styles = StyleSheet.create({
     androidPad: {
       height: 88,
     },
-    backgroundColor: '#0074E1',
-    // backgroundColor: 'rgb(42,85,161)',
     flexDirection: 'row',
   },
   left: {

src/home/FramePage.js

@@ -81,6 +81,7 @@ Row
   );
 
   render() {
+    const { theme } = this.props
     const data = [];
     for (let section = 1; section <= 10; section += 1) {
       const sContent = { items: [] };
@@ -90,7 +91,7 @@ Row
       data.push(sContent);
     }
     return (
-      <View style={styles.container}>
+      <View style={theme.container}>
         <NavigationBar
           title="Frame"
         />
@@ -100,7 +101,7 @@ Row
           title="Frame"
         />
         <LargeList
-          style={styles.container}
+          style={{height:SCREEN_HEIGHT,backgroundColor:'yellow'}}
           data={data}
           heightForSection={() => 50}
           renderSection={this._renderSection}

src/home/JSComponentList.js

@@ -38,7 +38,7 @@ class JSComponentList extends Component<Props> {
     console.log('MainPage', this.props);
     return (
       <View style={styles.container}>
-        <TouchableOpacity onPress={() => { this.props.push('JSPage'); }}>
+        <TouchableOpacity onPress={() => { this.props.push('JSPage', {test:1}); }}>
           <Text style={styles.instructions}>JSComponentList</Text>
         </TouchableOpacity>
       </View>

src/jsComponent/JSPage.js

@@ -10,35 +10,42 @@ import React, { Component } from 'react';
 import {
   Platform, StyleSheet, Text, View, TouchableOpacity,
 } from 'react-native';
-
+import { NavigationEvents, withNavigationFocus } from 'react-navigation';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { push,tab } from '../BasicNavigator/actions';
+import NavigationBar from '../components/NavigationBar';
+import BackButton from '../components/BackButton';
+
 
 
 type Props = {};
 
-class JSPage extends Component<Props> {
-  render() {
-    console.log('JSPage', this.props);
+function JSPage(props) {
+    console.log('JSPage_props:', props)
+    //console.log('JSPage props from lastPage', this.props.navigation.state);
     return (
       <View style={styles.container}>
-        <TouchableOpacity onPress={() => { this.props.push('NativePage'); }}>
+        <NavigationBar
+          left={<BackButton />}
+          title="ThemeDemo"
+        />
+        <TouchableOpacity onPress={() => { props.push('NativePage',{may: '22'}); }}>
           <Text style={styles.instructions}>JSPage</Text>
         </TouchableOpacity>
-        <TouchableOpacity onPress={() => { this.props.tab('ServicePage'); }}>
+        <TouchableOpacity onPress={() => { props.tab('ServicePage'); }}>
           <Text style={styles.instructions}>Tab切换</Text>
         </TouchableOpacity>
+
       </View>
+
     );
-  }
+
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
     backgroundColor: '#F5FCFF',
   },
   welcome: {
@@ -52,8 +59,8 @@ const styles = StyleSheet.create({
     marginBottom: 5,
   },
 });
-function propsMapping(props, extProps) {
-  const { nav } = props
+function propsMapping(props) {
+  const { nav } = props;
   return {
     nav,
   };

src/nativeComponent/NativePage.js

@@ -13,6 +13,8 @@ import {
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { pop } from '../BasicNavigator/actions';
+import NavigationBar from '../components/NavigationBar';
+import BackButton from '../components/BackButton';
 
 type Props = {
   routes: Array,
@@ -20,10 +22,13 @@ type Props = {
 };
 class NativePage extends Component<Props> {
   render() {
-    console.log('NativePage', this.props);
+    //console.log('NativePage props from lastPage', this.props.navigation.state);
     return (
-
       <View style={styles.container}>
+        <NavigationBar
+          left={<BackButton />}
+          title="ThemeDemo"
+        />
         <Text style={styles.instructions}>NativePage</Text>
 
         <TouchableOpacity onPress={() => {
@@ -43,8 +48,6 @@ class NativePage extends Component<Props> {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
     backgroundColor: '#F5FCFF',
   },
   welcome: {
@@ -58,8 +61,7 @@ const styles = StyleSheet.create({
     marginBottom: 5,
   },
 });
-function propsMapping(props, extProps) {
-  console.log(extProps);
+function propsMapping(props) {
   const { nav } = props;
   return {
     routes: nav ? nav.routes : [],

src/theme/ApplicationStyles.js

@@ -20,8 +20,8 @@ const ApplicationStyles = {
     },
     container: {
       flex: 1,
-      paddingTop: Metrics.baseMargin,
-      backgroundColor: Colors.transparent,
+      //paddingTop: Metrics.baseMargin,
+      backgroundColor: Colors.background,
     },
     section: {
       margin: Metrics.section,

src/theme/Colors.js

@@ -8,7 +8,7 @@
  * charcoal : string, text : string, eggplant : string, ricePaper : string}}
  */
 const colors = {
-  background: '#1F0808',
+  background: '#F4F5F5',
   clear: 'rgba(0,0,0,0)',
   facebook: '#3b5998',
   transparent: 'rgba(0,0,0,0)',

src/utils/versionCheck.js

-/**
- * @flow
- *
- */
-
-type Result = "GREATER_THEN" | "EQUAL" | "LESS_THEN"
-
-export const GREATER_THEN = 'GREATER_THEN'
-export const EQUAL = 'EQUAL'
-export const LESS_THEN = 'LESS_THEN'
-
-export function versionCheck(currentVersionString: string, targetVersionString: string): Result {
-  function numberialVersion(versionText) {
-    return versionText.split('.').map((i) => parseInt(i, 10))
-  }
-
-  function compare(currentVersion, targetVersion) {
-    const [current, ...restCurrent] = currentVersion
-    const [target, ...restTarget] = targetVersion
-    if (current == null && target == null) {
-      return EQUAL
-    }
-    if (current === target) {
-      return compare(restCurrent, restTarget)
-    }
-
-    if (current > target) return GREATER_THEN
-    return LESS_THEN
-  }
-
-  return compare(
-    numberialVersion(currentVersionString),
-    numberialVersion(targetVersionString),
-  )
-}