React Native/Expo：加载路由数据时显示启动屏的实现方案

核心问题排查方向 #

• 确认Context状态更新是否被正确触发
• 检查多个loading状态的联合判断逻辑是否严谨
• 确保Navigator能实时响应Context状态变化

分步修正代码 #

1. 修正LoadingContext实现 #

确保Context提供的状态更新方法能正确传递，避免状态更新不生效：

// LoadingContext.js
import React, { createContext, useState, useContext } from 'react';

const LoadingContext = createContext();

export const LoadingProvider = ({ children }) => {
  const [isLoadingContextOne, setIsLoadingContextOne] = useState(true); // 初始设为true，默认显示启动屏

  const updateLoadingState = (state) => {
    setIsLoadingContextOne(state);
  };

  return (
    <LoadingContext.Provider value={{ isLoadingContextOne, updateLoadingState }}>
      {children}
    </LoadingContext.Provider>
  );
};

export const useLoading = () => useContext(LoadingContext);

2. 修正AppNavigator中的启动屏判断逻辑 #

确保Navigator能实时监听Context状态变化，并且状态切换时能正确渲染：

// AppNavigator.js
import React from 'react';
import { View, ActivityIndicator, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Inbox from './inbox';
import { useLoading } from './LoadingContext';

const Stack = createStackNavigator();

const AppNavigator = () => {
  const { isLoadingContextOne } = useLoading();

  // 加载中显示启动屏/加载动画，否则显示路由
  if (isLoadingContextOne) {
    return (
      <View style={styles.loadingContainer}>
        <ActivityIndicator size="large" color="#0000ff" />
      </View>
    );
  }

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Inbox">
        <Stack.Screen name="Inbox" component={Inbox} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
});

export default AppNavigator;

3. 修正inbox.js中的useEffect逻辑 #

确保所有加载状态都完成后才更新Context，并且依赖项完整：

// inbox.js 中的useEffect部分
import { useLoading } from './LoadingContext';

const Inbox = () => {
  const [loadingInfoDeLuser, setLoadingInfoDeLuser] = useState(true);
  const [isLoading, setIsLoading] = useState(true);
  const [isLoadingmessage, setIsLoadingmessage] = useState(true);
  const { updateLoadingState } = useLoading();

  useEffect(() => {
    // 模拟数据加载请求
    const fetchData = async () => {
      try {
        // 示例：请求用户信息
        const userInfo = await fetchUserInfo();
        setLoadingInfoDeLuser(false);

        // 请求其他数据
        const otherData = await fetchOtherData();
        setIsLoading(false);

        // 请求消息数据
        const messages = await fetchMessages();
        setIsLoadingmessage(false);
      } catch (error) {
        console.error('数据加载失败:', error);
        // 加载失败也关闭启动屏，避免卡死
        setLoadingInfoDeLuser(false);
        setIsLoading(false);
        setIsLoadingmessage(false);
      }
    };

    fetchData();
  }, []);

  // 监听所有加载状态，全部完成后更新Context
  useEffect(() => {
    if (!loadingInfoDeLuser && !isLoading && !isLoadingmessage) {
      updateLoadingState(false);
    }
  }, [loadingInfoDeLuser, isLoading, isLoadingmessage, updateLoadingState]);

  // 页面渲染逻辑...
};

4. 确保App组件正确包裹Provider #

// App.js
import React from 'react';
import { LoadingProvider } from './LoadingContext';
import AppNavigator from './AppNavigator';

export default function App() {
  return (
    <LoadingProvider>
      <AppNavigator />
    </LoadingProvider>
  );
}

常见问题排查 #

• 如果启动屏一直不消失：检查三个loading状态是否真的都变为false，可在useEffect中添加console.log打印状态值，确认触发时机。
• 如果Context状态更新后Navigator不刷新：确认useLoading钩子在AppNavigator中正确调用，且没有被缓存或者使用了memo导致不重新渲染。
• 加载失败场景：务必在catch块中设置所有loading状态为false，避免用户一直停留在启动屏。

内容的提问来源于stack exchange，提问作者Miloose