Блог

У меня есть простой функциональный компонент с WebView внутри TabNavigator, в который я хотел бы ввести некоторый javascript, когда вкладка сфокусирована следующим образом:

 import React, {useRef, useEffect} from 'react';
import {WebView} from 'react-native-webview';

export default (props) => {

  const webViewRef = useRef();

  React.useEffect(() => {
    const unsubscribe = props.navigation.addListener('focus', () => {
      webViewRef.current.injectJavascript('console.log("Hello World")');
    });
    return unsubscribe;
  }, []);

  return (
    <WebView ref={webViewRef} />
  );
}
  

По какой-то причине webViewRef всегда не определено в слушателе.

Если я сделаю что-то вроде <WebView ref={(r) => console.log(r)} /> , я получу что-то вроде следующего:

Редактировать:

Простая настройка предоставленного примера работает, поэтому, я полагаю, мне придется выяснить, что происходит в моем коде:

 import React, { useRef } from 'react'
import { View } from 'react-native'
import { WebView } from 'react-native-webview'

export default () => {

  const webViewRef = useRef(null);

  const run = `
    document.body.style.backgroundColor = 'blue';
    true;
  `

  setTimeout(() => {
    webViewRef.current.injectJavaScript(run)
  }, 3000)

  return (
    <View style={{ flex: 1 }}>
      <WebView
        ref={webViewRef}
        source={{
          uri:
            'https://github.com/react-native-community/react-native-webview',
        }}
      />
    </View>
  )
}
  

РЕДАКТИРОВАТЬ 2: Корректировка простого примера и попытка использовать ссылку внутри прослушивателя не работает:

 import React, { useRef } from 'react'
import { View } from 'react-native'
import { WebView } from 'react-native-webview'

export default (props) => {

  const webViewRef = useRef(null);



  const run = `
    document.body.style.backgroundColor = 'blue';
    true;
  `
  const handleLoadEnd = () => {
    props.navigation.addListener('focus', () => {
      webViewRef.current.injectJavascript(run)
    })
  }

  return (
    <View style={{ flex: 1 }}>
      <WebView
        ref={webViewRef}
        source={{
          uri:
            'https://github.com/react-native-community/react-native-webview',
        }}
        onLoadEnd={handleLoadEnd}
      />
    </View>
  )
}
  

Правка 3: useFocusEffect также имеет ту же проблему:

   useFocusEffect(
    React.useCallback(() => {
      webViewRef.current.injectJavascript('alert("HI")')
    }, [props.navigation])
  )
  

Источники:

• Реагирующая навигация: Вызов функции при изменении фокуса экрана
• React Native WebView: Взаимодействие между JS и Native

О боже, это действительно еще один из тех эпических дней, когда волосы тянутся:

   webViewRef.injectJavascript < BAD
  webViewRef.injectJavaScript < GOOD
  

Кто-нибудь, пожалуйста, верните последние 4 часа моей жизни

Ссылка будет установлена, если onLoadEnd событие сработало. Итак, вы должны настроить свой код следующим образом:

 export default (props) => {

  const webViewRef = useRef();

  const handleLoadEnd = () => {
    props.navigation.addListener('focus', () => {
      webViewRef.current.injectJavascript('console.log("Hello World")');
    });
  }

  return (
    <WebView ref={webViewRef} onLoadEnd={handleLoadEnd}/>
  );
}
  

У меня есть рабочий пример. Смотрите здесь https://github.com/Tracer1337/MRGVP/blob/master/vertretungsplan/components/PaginatedWebview/PaginatedWebview.js