在 React Native 中的 Navigation 上带有负载错误的操作“NAVIGATE”

Question

我正在尝试检查用户是否已通过身份验证，然后将他们导航到主页，如果未导航，则将他们定向到 Pin 屏幕。 但我已经尝试过了，但我收到了这个错误

带有负载 {"name":"BottomBar","params":>{"screen":"Home"}} 的动作 'NAVIGATE' 没有被任何导航器处理。 你有一个名为“BottomBar”的屏幕吗？ 如果您尝试导航到嵌套导航器中的屏幕。

这是我尝试检查身份验证的方式

const App = () => {
  const [onboarded, setOnboarded] = useState(false);
  const [isBiometricSupported, setIsBiometricSupported] = useState(false);
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  useEffect(() => {
    (async () => {
      const compatible = await LocalAuthentication.hasHardwareAsync();
      setIsBiometricSupported(compatible);
    })();
  });

  function onAuthenticate() {
    const auth = LocalAuthentication.authenticateAsync({
      promptMessage: 'Authenticate',
      fallbackLabel: 'Enter Password',
    });
    auth.then(result => {
      setIsAuthenticated(result.success);
      console.log(result);
    }
    );
  }

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

  const getStorage = async () => {
    const onboarded = await AsyncStorage.getItem('@onboarded');
    setOnboarded(JSON.parse(onboarded));
  };

  const [loaded] = useFonts({
    SFBold: require("./assets/fonts/sf-bold.ttf"),
    SFMedium: require("./assets/fonts/sf-medium.ttf"),
    SFRegular: require("./assets/fonts/sf-regular.ttf"),
    SFLight: require("./assets/fonts/sf-light.ttf"),
  });
  if (!loaded) return null;

  return (
    <NavigationContainer theme={theme} >
      <Stack.Navigator initialRouteName={onboarded ? 'BottomBar' : 'Onboarding'} screenOptions={{ headerShown: false }}>
          <Stack.Screen name="BottomBar" component={BottomBar} />
          <Stack.Screen name="PinScreen" component={PinScreen} />
        <Stack.Screen name="Onboarding" component={Onboarding} />
        <Stack.Screen name="SignUp" component={SignUp} />
        <Stack.Screen name="SignIn" component={SignIn} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

这是我的 PinScreen，用户应该在插入正确的 Pin 后导航到主屏幕

const navigation = useNavigation();

const [pin, setPin] = useState('');
const [isAuthenticated, setIsAuthenticated] = useState(false);
const [isPinSet, setIsPinSet] = useState(false);

const handlePinSubmit = async () => {
    if (!isPinSet) {
        try {
            await AsyncStorage.setItem('@pin', pin);
            setIsPinSet(true);
        } catch (error) {
            console.error(error);
        }
    } else {
        try {
            const storedPin = await AsyncStorage.getItem('@pin');
            if (pin === storedPin) {
                setIsAuthenticated(true);
                navigation.navigate('BottomBar', { screen: 'Home' });
            } else {
                console.log('Incorrect PIN');
            }
        } catch (error) {
            console.error(error);
        }
    }
};

请帮助

Answer 1

尽量避免在充当屏幕的组件中使用 useNavigation。 他们默认接收一个名为 navigation 的 prop，实际上你可能想用它来导航。

文档解释 为什么你不应该在屏幕内使用 useNavigation 钩子

因此，请尝试更改您的 useNavigation 挂钩（不要使用它）并使用您的固定屏幕接收到的导航道具。