有沒有辦法使用 useNavigation 鈎子導航到類組件？

Question

有沒有辦法使用 useNavigation 鈎子導航到類組件？

這是我的課：

export default class AzureLogin extends React.Component

所以我需要從Screen1導航到AzureLogin 。 有什么辦法呢？

import { useNavigation } from '@react-navigation/native';

const Screen1 = (props) => {
  const [data, setData] = useState('');
  const [isLoaded, setIsLoaded] = useState(false);
  const dispatch = useDispatch();
  const userState = useSelector((state) => state.userReducer);

  const [isSync, setIsSync] = useState(false);
  const syncData = useGetUserDevicesData(isSync);
  useEffect(() => {
    if (syncData.isLoaded === true) {
      setIsSync(false);
      setData(syncData.data);
    }
  }, [syncData.isLoaded]);

  useEffect(() => {
    const getItem = async () => {
      const azureToken = await AsyncStorage.getItem('AZURE-TOKEN');
      const userName = await AsyncStorage.getItem('AZURE-USERNAME');
      const googlToken = await AsyncStorage.getItem('GOOGLE-TOKEN');
      const deviceId = await AsyncStorage.getItem('DEVICE-ID');
      const platformId = await AsyncStorage.getItem('PLATFORM-TYPE');

      getSaveUserTokenData({
        userName,
        googlToken,
        platformId,
        deviceId,
        azureToken,
      });
    };
    getItem();
  }, []);

  const getSaveUserTokenData = async (data) => {
const navigation = useNavigation();

    const url =
      'https://' +
      'userName=' +
      data.userName +
      '&userToken=' +
      data.googlToken +
      '&PlatformType=' +
      data.platformId +
      '&DeviceID=' +
      data.deviceId;
    await fetch(url, {
      method: 'GET',
      headers: {
        Authorization: data.azureToken,
      },
    })
      .then((response) => response.json())
      .then((data) => {
        console.log(
          'THE FETCH DATA TO getSaveUserTokenData FUNCTION IS:',

          data
        );
      })
      .catch((error) => {}); //**HERE I NEED TO NAVIGATE !!**
  };

Answer 1

能夠導航屏幕並不取決於它是功能組件還是類組件。 因此，您當然可以導航到 AzureLogin。

但正如 #1鈎子規則明確指出的那樣

只在頂層調用鈎子

不要在循環、條件或嵌套函數中調用 Hook。 相反，始終在 React 函數的頂層使用 Hook。 通過遵循此規則，您可以確保每次渲染組件時以相同的順序調用 Hook。 這就是允許 React 在多個 useState 和 useEffect 調用之間正確保留 Hooks 狀態的原因。 （如果你很好奇，我們將在下面深入解釋這一點。）

因此，根據您的 Screen1 組件，

您應該將useNavigation掛鈎從getSaveUserTokenData移動到頂級，如下所示：

const Screen1 = (props) => {
  const [data, setData] = useState('');
  const [isLoaded, setIsLoaded] = useState(false);
  const dispatch = useDispatch();
  const userState = useSelector((state) => state.userReducer);
  const navigation = useNavigation();
  ...

只有這樣，你才能在任何你想要的地方調用navigation.navigate('AzureLogin') 。