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 { 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 } = useModel("wordsModel", true);
  const { loading, clearLoading } = useModel("loadingModel", true);

  // Load any resources or data that we need prior to rendering the app
  React.useEffect(() => {
    async function loadResourcesAndDataAsync() {
      try {
        SplashScreen.preventAutoHide();
        // Load fonts
        await Font.loadAsync({
          ...Ionicons.font,
          "space-mono": fontFile,
        });

        await Font.loadAsync(
          "antoutline",
          // eslint-disable-next-line
          require("@ant-design/icons-react-native/fonts/antoutline.ttf")
        );

        await Font.loadAsync(
          "antfill",
          // eslint-disable-next-line
          require("@ant-design/icons-react-native/fonts/antfill.ttf")
        );

        getWords();
      } catch (e) {
        // We might want to provide this error information to an error reporting service
        // eslint-disable-next-line no-console
        console.log(e);
      } finally {
        setLoadingComplete(true);
        SplashScreen.hide();
      }
    }

    loadResourcesAndDataAsync();
  }, []);

  const [initRouteName, setInit] = React.useState("");
  const {
    getUserInfo,
    getGuideStep,
    initApp,
    refreashReason,
    changeInIt,
    setinitRoute,
  } = useModel("userModel");

  React.useEffect(() => {
    function getLogin() {
      if (refreashReason !== "guideStep") {
        return getUserInfo();
      }
      return Promise.resolve();
    }

    if (initApp && initRouteName) {
      loading();
    }

    if (initApp) {
      getLogin()
        .then(() => {
          return getGuideStep();
        })
        .then(res => {
          switch (res) {
            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("");
              break;
          }
        })
        .catch(() => {
          //  未登录
          setinitRoute("Login");
          setInit("Login");
        })
        .finally(() => {
          changeInIt();
        });
    }
  }, [initApp]);

  React.useEffect(() => {
    if (navigationRef.current) {
      const { name } = navigationRef.current.getCurrentRoute();
      if (name !== initRouteName && initRouteName) {
        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>
    </>
  );
}