feat: 双向同步history、navigation状态，支持使用 history 或者 navigation 进行命令式跳转。

Author: 徐远翔

.github/workflows/android.yml

@@ -11,10 +11,6 @@ on:
 jobs:
   test-android:
     runs-on: macos-latest
-    defaults:
-      run:
-        shell: bash
-        working-directory: example
     steps:
       - uses: actions/checkout@v2
       - name: Setup sdk
@@ -42,6 +38,10 @@ jobs:
           node-version: '10.x'
       - name: Install npm denpendencies
         run: yarn install --frozen-lockfile --non-interactive --silent
+      - name: Compilation
+        run: yarn build
+      - name: Install example npm denpendencies
+        run: cd example && yarn install --frozen-lockfile --non-interactive --silent
       - name: Generate umi temp files
         run: yarn generate
       - name: Show details

.github/workflows/ios.yml

@@ -11,17 +11,17 @@ on:
 jobs:
   test-ios:
     runs-on: macos-latest
-    defaults:
-      run:
-        shell: bash
-        working-directory: example
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
           node-version: '10.x'
       - name: Install npm denpendencies
         run: yarn install --frozen-lockfile --non-interactive --silent
+      - name: Compilation
+        run: yarn build
+      - name: Install example npm denpendencies
+        run: cd example && yarn install --frozen-lockfile --non-interactive --silent
       - name: Install pod denpendencies
         run: cd ios && pod install --silent && cd -
       - name: Build ios

docs/Router.md

@@ -246,7 +246,7 @@ export function getReactNavigationInitialIndicator() {
 }
 
 // 订阅 react-navigation 状态变化通知，每次路由变化时，将导航状态持久化保存到手机本地。
-export async function onReactNavigationStateChange(state) {
+export async function onReactNavigationStateChange({ state }) {
   if (state) {
     await AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state));
   }

example/package.json

@@ -23,7 +23,8 @@
     "react-native-gesture-handler": "1.6.1",
     "react-native-reanimated": "1.8.0",
     "react-native-safe-area-context": "1.0.2",
-    "react-native-screens": "2.7.0"
+    "react-native-screens": "2.7.0",
+    "umi-renderer-react-navigation": "file:../packages/umi-renderer-react-navigation"
   },
   "devDependencies": {
     "@babel/core": "^7.6.2",
@@ -38,8 +39,8 @@
     "appium": "^1.17.1",
     "metro-react-native-babel-preset": "^0.59.0",
     "umi": "^3.2.1",
-    "umi-preset-react-native": "0.6.0-alpha.0",
-    "umi-preset-react-navigation": "0.6.0-alpha.0",
+    "umi-preset-react-native": "file:../packages/umi-preset-react-native",
+    "umi-preset-react-navigation": "file:../packages/umi-preset-react-navigation",
     "webdriverio": "^6.1.14"
   }
 }

example/pages/index.js

@@ -3,7 +3,7 @@ import { StatusBar, Text, Button } from 'react-native';
 import { connect, Link } from 'umi';
 import { getTestProps } from '../services';
 
-function IndexPage({ greeting }) {
+function IndexPage({ greeting, navigation }) {
   return (
     <>
       <StatusBar barStyle="light-content" />
@@ -14,11 +14,10 @@ function IndexPage({ greeting }) {
         component={Button}
         title="Go to FeedbackPage"
       />
-      <Link
+      <Button
         {...getTestProps('linkToLoginPage')}
-        to="/login"
-        component={Button}
         title="Go to LoginPage"
+        onPress={() => navigation.navigate('/login')}
       />
     </>
   );

example/pages/profile/settings/feedback.js

@@ -8,7 +8,7 @@ export default function FeedBackPage({ route, navigation }) {
       navigation.setOptions({
         headerTitle: () => <Text {...getTestProps('feedbackPageTitle')}>Feedback Page</Text>,
         headerLeft: ({ label, ...rests }) => (
-          <Button title={label} {...rests} {...getTestProps('feedbackPageBackButton')} />
+          <Button title={label || ''} {...rests} {...getTestProps('feedbackPageBackButton')} />
         ),
       }),
     [navigation],

packages/umi-renderer-react-navigation/src/createHistoryNavigator.tsx

@@ -15,18 +15,16 @@ import {
   StackNavigationConfig,
   StackNavigationOptions,
 } from '@react-navigation/stack/lib/typescript/src/types';
-import { History, Location, Action } from 'history';
-import { parse } from 'querystring';
+import { Location, Action } from 'history';
+import { parse, stringify } from 'querystring';
 
 function HistoryNavigator({
   initialRouteName,
   children,
   screenOptions,
   history,
   ...rest
-}: DefaultNavigatorOptions<StackNavigationOptions> &
-  StackRouterOptions &
-  StackNavigationConfig & { history: History<any> }) {
+}: DefaultNavigatorOptions<StackNavigationOptions> & StackRouterOptions & StackNavigationConfig & { history: any }) {
   const defaultOptions = {
     gestureEnabled: Platform.OS === 'ios',
     animationEnabled: Platform.OS !== 'web',
@@ -73,27 +71,52 @@ function HistoryNavigator({
     [navigation, state.index, state.key],
   );
 
-  React.useEffect(
-    () =>
+  React.useEffect(() => {
+    if (history.index > state.index) {
+      history.go(state.index - history.index);
+    } else if (history.index < state.index) {
+      const route = state.routes[state.index];
+      if (route) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
+        history.push(route.params ? `${route.name}?${stringify(route.params)}` : route.name);
+      }
+    }
+    const subscribes: (() => void)[] = [];
+    subscribes.push(
       history.listen((location: Location<any>, action: Action): void => {
         if (state.routeNames.includes(location.pathname)) {
           switch (action) {
             case 'POP':
-              if (navigation.canGoBack()) {
+              if (state.index > history.index) {
                 navigation.dispatch(StackActions.pop());
               }
               break;
             case 'PUSH':
-              navigation.dispatch(StackActions.push(location.pathname, parse(location.search.replace('?', ''))));
+              if (state.index < history.index) {
+                navigation.dispatch(StackActions.push(location.pathname, parse(location.search.replace('?', ''))));
+              }
               break;
             case 'REPLACE':
-              navigation.dispatch(StackActions.replace(location.pathname, parse(location.search.replace('?', ''))));
+              if (state.index === history.index) {
+                navigation.dispatch(StackActions.replace(location.pathname, parse(location.search.replace('?', ''))));
+              }
               break;
           }
         }
       }),
-    [navigation, history],
-  );
+    );
+    return () => {
+      for (const fn of subscribes) {
+        if (typeof fn === 'function') {
+          try {
+            fn();
+          } catch (ignored) {}
+        }
+      }
+    };
+  }, [navigation, history, state]);
+
   return <StackView {...rest} descriptors={descriptors} state={state} navigation={navigation} />;
 }