Блог

Есть ли какой- нибудь способ перейти с помощью useNavigation hook к компоненту класса?

Это мой класс:

export default class AzureLogin extends React.Component

Итак , мне нужно перейти к AzureLogin откуда Screen1 . каков способ сделать это ?

 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  
      'amp;userToken='  
      data.googlToken  
      'amp;PlatformType='  
      data.platformId  
      'amp;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 !!**
  };
  

Возможность навигации по экрану не зависит от того, является ли это функциональным компонентом или компонентом класса. Таким образом, вы, конечно, можете перейти к AzureLogin.

Но, как четко указано в Правилах перехватов # 1

Перехваты вызовов выполняются только на верхнем уровне

Не вызывайте перехваты внутри циклов, условий или вложенных функций. Вместо этого всегда используйте перехваты на верхнем уровне вашей функции React. Следуя этому правилу, вы гарантируете, что перехваты вызываются в одном и том же порядке при каждом отображении компонента. Это то, что позволяет React корректно сохранять состояние перехватов между несколькими вызовами useState и 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') внутри, где хотите.