Dingdong_client/App.js

import * as React from 'react';
import { StatusBar, Platform, StyleSheet, View } from 'react-native';
import { NavigationContainer, CommonActions } from '@react-navigation/native';
import {
  createStackNavigator,
  CardStyleInterpolators,
} from '@react-navigation/stack';
import { UseAPIProvider } from '@umijs/use-request';

import { Provider as PaperProvider } from 'react-native-paper';
import { Provider } from '@ant-design/react-native';
import { ThemeProvider } from 'react-native-magnus';

import useModel from 'flooks';
import { useUpdateEffect } from '@umijs/hooks';

import { navigationRef } from './navigation/RootNavigation';
import useCachedResources from './hooks/useCachedResources';
import BottomTabNavigator from './navigation/BottomTabNavigator';
import BasicScreens from './navigation/BaseNavigator';
import words from './flooks/Words';
import Toast from './flooks/Toast';
import user from './flooks/User';
import request from './Utils/RequestUtils';
import theme from './constants/Theme';
import ThemeMagnus from './constants/ThemeMagnus';

const Stack = createStackNavigator();

export default function App() {
  const isLoadingComplete = useCachedResources();
  // 初始化 Toast
  useModel(Toast, []);
  const { wordsInit, local } = useModel(words, ['local']);
  // Load words  local语言转变，切换语言
  React.useEffect(() => {
    wordsInit();
  }, [local]);
  const { id } = useModel(user, ['id']);
  useUpdateEffect(() => {
    let initName = '';
    if (id === 0) {
      // 未登录
      initName = 'Login';
    } else if (id !== null) {
      // 已登录
      initName = 'Home';
    }
    if (initName) {
      navigationRef.current.dispatch(
        CommonActions.reset({
          index: 0,
          routes: [
            {
              name: initName,
            },
          ],
        })
      );
    }
  }, [id]);

  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <View style={styles.container}>
        <ThemeProvider theme={ThemeMagnus}>
          <Provider>
            <PaperProvider theme={theme}>
              {Platform.OS !== 'ios' && (
                <StatusBar translucent={false} backgroundColor="#FFC21C" />
              )}
              <UseAPIProvider
                value={{
                  requestMethod: request,
                }}
              >
                <NavigationContainer ref={navigationRef}>
                  <Stack.Navigator
                    initRouteName="InitApp"
                    screenOptions={{
                      headerShown: false,
                      cardOverlayEnabled: true,
                      cardStyle: { backgroundColor: '#eee', flex: 1 },
                      contentStyle: { backgroundColor: '#eee', flex: 1 },
                      gestureEnabled: true,
                      stackPresentation: 'push',
                      cardStyleInterpolator:
                        CardStyleInterpolators.forHorizontalIOS,
                    }}
                  >
                    {/* 基础功能页面 */}
                    {BasicScreens(Stack.Screen)}
                    <Stack.Screen name="Home" component={BottomTabNavigator} />
                  </Stack.Navigator>
                </NavigationContainer>
              </UseAPIProvider>
            </PaperProvider>
          </Provider>
        </ThemeProvider>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});