有没有办法使用 useNavigation 挂钩导航到类组件？答案

【问题标题】：Is there any way to navigate with useNavigation hook to a class component?有没有办法使用 useNavigation 挂钩导航到类组件？
【发布时间】：2020-09-06 07:10:06
【问题描述】：

有没有办法使用 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 !!**
  };

【问题讨论】：

标签： javascript reactjs react-native react-hooks react-navigation

【解决方案1】：

能够导航屏幕并不取决于它是函数式组件还是类组件。所以你当然可以导航到 AzureLogin。

但正如 #1 Rules of Hooks 明确指出的那样

仅在顶层调用 Hooks

不要在循环、条件或嵌套函数中调用 Hooks。相反，请始终在 React 函数的顶层使用 Hooks。经过遵循此规则，您确保 Hooks 以相同的方式调用每次渲染组件时排序。这就是让 React 能够正确保留多个 useState 和 Hooks 之间的状态 useEffect 调用。（如果您好奇，我们将对此进行深入解释下面。）

因此，根据您的 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')。

【讨论】：