Блог

Контекстуализация:

Всем привет, у меня есть веб-представление, которое вызывается после входа пользователя в систему. Во время тестирования с консолями я увидел, что мой код выполняется дважды, а не один раз. Это вызывает у меня некоторые проблемы с выполнением камеры. При вызове страницы из веб-представления я показываю счетчик, пока страница не загружается. После загрузки, когда пользователь просматривает страницы, я использую эффект использования для прослушивания URL-адреса. Когда пользователь направляется по определенному адресу, я возвращаюсь на экран входа в приложение.

Проблема:

К сожалению, мне приходится использовать веб-представление, чтобы открыть камеру устройства, однако, поскольку код запускается дважды, у меня возникают некоторые конфликты, иногда появляется камера, а затем нет. Вот почему я хотел бы, чтобы выполнение было линейным, выполняя houvinte только тогда, когда он вызывается

Мой Код:

 import React, { useState, useEffect, useRef } from 'react';
import { Text, View, StyleSheet, BackHandler } from 'react-native';
import { WebView } from 'react-native-webview';
import { Camera } from 'expo-camera'
import { ActivityIndicator } from 'react-native';
/* import { useNavigation } from '@react-navigation/native'; */

export default function WebViewUsrLogado(/* props:any */) {
 /*  const propriedade = props.route.params.url */
  const [hasPermission, setHasPermission] = useState<any | null>(null);
  const [UrlTransicao, setUrl] = useState('');
  const [type, setType] = useState(Camera.Constants.Type.back);
  const webViewRef = useRef<any | null>(null)
 /*  const navigation = useNavigation(); */
  
  const Spinner = () => (
    <View style={styles.activityContainer}>
      <ActivityIndicator size="large" color="#f29900" />
    </View>
  );

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  useEffect(() => {

    const backAction = () => {
      webViewRef.current.goBack();
      return true;
    };
    const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
    return () => backHandler.remove();
  }, []);


  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }
  function voltar(url: any){
    if (url != 'otherurll') {
      console.log('Diferente')
    } else {
      console.log('iGUAL');
     /*  let canGoBack = navigation.canGoBack();
      if (canGoBack) {
        navigation.goBack();
      } else{
        console.log('tENTOU FAZER AÇÃO MAIS DE UMA VEZ')
      } */
    }
  }
  return (
    <View style={styles.container}>
      <WebView
        source={{ uri: 'myurl' }}
        ref={webViewRef}
        style={styles.view}
        originWhitelist={['*']}
        allowsInlineMediaPlayback
        javaScriptEnabled
        scalesPageToFit
        mediaPlaybackRequiresUserAction={false}
        javaScriptEnabledAndroid
        useWebkit
        startInLoadingState={true}
        renderLoading={Spinner}
        onNavigationStateChange={(event)=>{
          setUrl(event.url)
          voltar(event.url)
        }}
      />
    </View>
  );
}