如何将引导页逻辑迁移至自定义Hook/Context并保留原有功能？

问题根源 #

你当前的自定义HookuseOnBoarding在两个组件中调用时，会分别创建独立的onBoarded状态实例。Onboarding组件中调用handleOnBoarding更新的是自身Hook实例的状态，Nav组件的Hook实例无法感知到这个变化，因此导航栈不会重新渲染隐藏引导页。

解决方案 #

方案一：用React Context实现状态共享 #

通过Context将引导页状态全局共享，让Nav和Onboarding组件消费同一个状态源：

1. 创建OnboardingContext

// OnboardingContext.js
import { createContext, useContext, useState, useEffect } from 'react';
import EncryptedStorage from '...'; // 替换为你的加密存储导入路径

const OnboardingContext = createContext();

export const OnboardingProvider = ({ children }) => {
  const [onBoarded, setOnBoarded] = useState(false);

  useEffect(() => {
    const checkOnBoardedStatus = async () => {
      const ob = await EncryptedStorage.getItem('ONBOARDED');
      setOnBoarded(!!ob);
    };
    checkOnBoardedStatus();
  }, []);

  const handleOnBoarding = async () => {
    await EncryptedStorage.setItem('ONBOARDED', 'true');
    setOnBoarded(true);
  };

  return (
    <OnboardingContext.Provider value={{ onBoarded, handleOnBoarding }}>
      {children}
    </OnboardingContext.Provider>
  );
};

export const useOnboardingContext = () => useContext(OnboardingContext);

2. 在根组件中包裹Provider

// App.js
import { OnboardingProvider } from './OnboardingContext';
import Nav from './Nav';

export default function App() {
  return (
    <OnboardingProvider>
      <Nav />
    </OnboardingProvider>
  );
}

3. Nav组件中使用Context

// Nav.js
import { useOnboardingContext } from './OnboardingContext';

export default function Nav() {
  const { onBoarded } = useOnboardingContext();

  return (
    <Stack.Navigator initialRouteName="onboarding">
      {!onBoarded && <Screen name="onboarding" component={Onboarding} />}
      <Screen name="MainApp" component={MainApp} />
      ...
    </Stack.Navigator>
  );
}

4. Onboarding组件中使用Context

// Onboarding.js
import { useOnboardingContext } from './OnboardingContext';

export default function Onboarding({ navigation }) {
  const { handleOnBoarding } = useOnboardingContext();

  const handleSkip = async () => {
    await handleOnBoarding();
    navigation.navigate('MainTabNavigator');
  };

  return (
    ...
    <Button onPress={handleSkip}>skip</Button>
    ...
  );
}

方案二：优化自定义Hook，结合导航参数同步状态 #

如果不想用Context，可以通过导航参数触发Nav组件重新检查存储状态：

修改自定义Hook，新增状态检查方法：

// useOnBoarding.js
import { useState, useEffect } from 'react';
import EncryptedStorage from '...';

const useOnBoarding = () => {
  const [onBoarded, setOnBoarded] = useState(false);

  const checkOnBoardedStatus = async () => {
    const ob = await EncryptedStorage.getItem('ONBOARDED');
    setOnBoarded(!!ob);
  };

  useEffect(() => {
    checkOnBoardedStatus();
  }, []);

  const handleOnBoarding = async () => {
    await EncryptedStorage.setItem('ONBOARDED', 'true');
    await checkOnBoardedStatus();
  };

  return { onBoarded, handleOnBoarding, checkOnBoardedStatus };
};

export default useOnBoarding;

Onboarding组件跳转时携带刷新标记：

// Onboarding.js
const { handleOnBoarding } = useOnBoarding();

const handleSkip = async () => {
  await handleOnBoarding();
  navigation.navigate('MainTabNavigator', { refreshOnboarding: true });
};

Nav组件监听导航焦点，触发状态检查：

// Nav.js
const { onBoarded, checkOnBoardedStatus } = useOnBoarding();
const navigation = useNavigation();

useEffect(() => {
  const unsubscribe = navigation.addListener('focus', () => {
    const currentRoute = navigation.getState().routes.at(-1);
    if (currentRoute.params?.refreshOnboarding) {
      checkOnBoardedStatus();
    }
  });
  return unsubscribe;
}, [navigation, checkOnBoardedStatus]);

方案三：保留原有逻辑的简化优化 #

直接将引导页逻辑整合到Nav组件，通过路由参数传递处理方法给Onboarding：

Nav组件：

// Nav.js
const [onBoarded, setOnBoarded] = useState(false);

useEffect(() => {
  const isOnBoarded = async () => {
    const ob = await EncryptedStorage.getItem('ONBOARDED');
    setOnBoarded(!!ob);
  };
  isOnBoarded();
}, []);

const handleOnBoarding = async () => {
  await EncryptedStorage.setItem('ONBOARDED', 'true');
  setOnBoarded(true);
};

return (
  <Stack.Navigator initialRouteName="onboarding">
    {!onBoarded && (
      <Screen 
        name="onboarding" 
        component={Onboarding} 
        initialParams={{ handleOnBoarding }} 
      />
    )}
    <Screen name="MainApp" component={MainApp} />
    ...
  </Stack.Navigator>
);

Onboarding组件：

// Onboarding.js
export default function Onboarding({ navigation, route }) {
  const { handleOnBoarding } = route.params;

  const handleSkip = async () => {
    await handleOnBoarding();
    navigation.navigate('MainTabNavigator');
  };

  return (
    ...
    <Button onPress={handleSkip}>skip</Button>
    ...
  );
}

总结 #

• Context方案：适合全局状态共享场景，逻辑清晰，后续扩展方便；
• Hook+导航参数方案：无需引入Context，通过导航事件触发状态同步，适合轻量场景；
• 原有逻辑优化：实现最简单，无需额外抽象，适合小型应用。

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