Dingdong_app/App.js

/* eslint-disable import/no-named-default */
/* eslint-disable react/destructuring-assignment */
/* eslint-disable react/jsx-props-no-spreading */
import * as React from "react";
import * as eva from "@eva-design/eva";
import {
  ApplicationProvider,
  Layout,
  IconRegistry,
} from "@ui-kitten/components";
import { Provider } from "@ant-design/react-native";
import { EvaIconsPack } from "@ui-kitten/eva-icons";
import { SplashScreen } from "expo";
import * as Font from "expo-font";
import { Ionicons } from "@expo/vector-icons";
import { NavigationContainer, CommonActions } from "@react-navigation/native";
import {
  createStackNavigator,
  CardStyleInterpolators,
} from "@react-navigation/stack";
import { useModel } from "flooks";
import { useUpdateEffect, useMount } from "@umijs/hooks";
import { enableScreens } from "react-native-screens";
// eslint-disable-next-line no-unused-vars
import * as model from "./models";
import { default as theme } from "./theme.json"; // <-- Import app theme
import { default as customMapping } from "./mapping.json"; // <-- Import app theme
import Dialog from "./components/Dialog";

import BottomTabNavigator from "./navigation/BottomTabNavigator";
import LoginStackNavigator from "./navigation/LoginStackNavigator";
import GuideScreens from "./navigation/GuideStackNavigator";
import BasicScreens from "./navigation/BasicNavigator";
import { navigationRef } from "./navigation/RootNavigation";

enableScreens();

const Stack = createStackNavigator();

const fontFile = require("./assets/fonts/SpaceMono-Regular.ttf");

export default function App(props) {
  const [isLoadingComplete, setLoadingComplete] = React.useState(false);
  const { getWords, local } = useModel("wordsModel");
  const { clearLoading } = useModel("loadingModel", true);
  const {
    mid,
    guideStep,
    getUserInfo,
    checkNowGuideStep,
    setinitRoute,
  } = useModel("userModel");

  useMount(() => {
    SplashScreen.preventAutoHide();
    Font.loadAsync({
      ...Ionicons.font,
      "space-mono": fontFile,
    })
      .then(() => {
        return Font.loadAsync(
          "antoutline",
          // eslint-disable-next-line
          require("@ant-design/icons-react-native/fonts/antoutline.ttf")
        );
      })
      .then(() => {
        return Font.loadAsync(
          "antfill",
          // eslint-disable-next-line
          require("@ant-design/icons-react-native/fonts/antfill.ttf")
        );
      })
      .then(() => {
        return getUserInfo();
      })
      .catch(e => {
        console.log(e);
      });
    //   .finally(() => {
    //     setLoadingComplete(true);
    //     SplashScreen.hide();
    //   });
  });

  React.useEffect(() => {
    getWords();
  }, [local]);

  const [initRouteName, setInit] = React.useState("");

  useUpdateEffect(() => {
    if (mid === 0) {
      // 未登录
      setinitRoute("Login");
      setInit("Login");
    } else if (mid !== 0) {
      checkNowGuideStep();
    }
  }, [mid]);

  useUpdateEffect(() => {
    console.log(guideStep);
    switch (guideStep) {
      case "finish":
        setInit("Root");
        break;
      case "ComeBack":
        setinitRoute("RegisterSe");
        setInit("Login");
        break;
      case "1":
        setInit("Guide1");
        break;
      case "2":
        setInit("Guide2");
        break;
      case "3":
        setInit("Guide3");
        break;
      case "4":
        setInit("Guide4");
        break;
      case "5":
        setInit("StoreAudit");
        break;
      default:
        setInit("Login");
        break;
    }
  }, [guideStep]);

  useUpdateEffect(() => {
    if (!isLoadingComplete) {
      setLoadingComplete(true);
      SplashScreen.hide();
    } else {
      navigationRef.current.dispatch(
        CommonActions.reset({
          index: 0,
          routes: [
            {
              name: initRouteName,
            },
          ],
        })
      );
      clearLoading();
    }
  }, [initRouteName]);

  if (!isLoadingComplete && !props.skipLoadingScreen && !initRouteName) {
    return null;
  }

  return (
    <>
      <IconRegistry icons={EvaIconsPack} />
      <Provider>
        <ApplicationProvider
          {...eva}
          theme={{ ...eva.light, ...theme }}
          customMapping={customMapping}
        >
          <Dialog />
          <Layout style={{ flex: 1 }}>
            <NavigationContainer ref={navigationRef}>
              <Stack.Navigator
                headerMode="none"
                screenOptions={{
                  gestureEnabled: true,
                  cardStyleInterpolator:
                    CardStyleInterpolators.forHorizontalIOS,
                }}
                initialRouteName={initRouteName}
              >
                {GuideScreens(Stack.Screen)}

                <Stack.Screen
                  name="Root"
                  component={BottomTabNavigator}
                  options={{}}
                />

                <Stack.Screen name="Login" component={LoginStackNavigator} />

                {/* 基础功能页面 */}
                {BasicScreens(Stack.Screen)}
              </Stack.Navigator>
            </NavigationContainer>
          </Layout>
        </ApplicationProvider>
      </Provider>
    </>
  );
}