如何在React Native入口App.tsx中使用依赖Context的useAppIsReady Hook

你的问题根源在于：App组件调用useAppIsReady时，AppProvider还未完成渲染，导致useContext(AppContext)无法获取到有效状态。要解决这个问题，需要调整组件层级让依赖Context的逻辑处于Provider包裹范围内，同时优化Hook逻辑避免渲染阶段直接更新状态。

步骤1：优化useAppIsReady Hook逻辑 #

原Hook中直接在render阶段调用setAppIsReady会触发React警告，改用useEffect监听图片加载状态变化：

import { useState, useEffect, useContext } from 'react';
import AppContext from './your-app-context-path'; // 替换为你的Context实际路径

const useAppIsReady = () => {
  const [appIsReady, setAppIsReady] = useState(false);
  const { numberOfImagesLoaded } = useContext(AppContext);

  useEffect(() => {
    // 当图片加载数量达标且app未标记为ready时更新状态
    if (numberOfImagesLoaded > 5 && !appIsReady) {
      setAppIsReady(true);
    }
  }, [numberOfImagesLoaded, appIsReady]);

  return appIsReady;
};

步骤2：重构App组件结构 #

将原App中依赖Context的逻辑拆分到子组件（如MainApp）中，让AppProvider包裹这个子组件，确保子组件能正常访问Context：

import React, { useEffect } from 'react';
import { SplashScreen } from 'expo-splash-screen';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import AppProvider from './your-app-provider-path'; // 替换为你的Provider实际路径
import Home from './Home';
import MyQueuesScreen from './MyQueuesScreen';
import Profile from './Profile';
import { useAppIsReady } from './your-useAppIsReady-path';

SplashScreen.preventAutoHideAsync();

const Tab = createBottomTabNavigator();

// 封装原业务逻辑的子组件
const MainApp = () => {
  const appIsReady = useAppIsReady();

  useEffect(() => {
    const prepare = async () => {
      if (appIsReady) {
        await SplashScreen.hideAsync();
      }
    };
    prepare();
  }, [appIsReady]);

  if (!appIsReady) {
    return null;
  }

  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="MyQueues" component={MyQueuesScreen} />
        <Tab.Screen name="Profile" component={Profile} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

// 入口组件仅负责提供Context并渲染业务组件
export default function App() {
  return (
    <AppProvider>
      <MainApp />
    </AppProvider>
  );
}

方案说明 #

• MainApp被包裹在AppProvider内部，调用useAppIsReady时能正常获取Context状态。
• 将状态更新逻辑移至useEffect，避免了render阶段直接修改状态引发的警告和性能问题。
• 保留原有业务逻辑的同时，完全规避了props层层传递的繁琐。

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