Блог

Я пытаюсь внедрить код JS, чтобы предупредить пользователя перед загрузкой содержимого собственного веб-представления React, однако для меня он просто переходит к индикатору активности и загружает веб-представление без ввода какого-либо Javascript. Как мне это исправить? Код ниже:

 import React from 'react';
import { View, ActivityIndicator } from 'react-native';
import { WebView } from 'react-native-webview';
import styles from '../../styles';

export default function Links() {

  function LoadingIndicatorView() {
    return (
      <View style={styles.hubLoading}>
        <ActivityIndicator color='#009b88' size='large' />
      </View>
    )  
  }

  const runFirst = `
      setTimeout(function() { window.alert('hi') }, 2000);
      true; // note: this is required, or you'll sometimes get silent failures
    `

  return <WebView source={{ uri: https://www.google.com/ }} renderLoading={LoadingIndicatorView} startInLoadingState={true} javaScriptEnabled={true} injectedJavaScript={runFirst} />;
}
 

Кстати, я запускаю приложение на своем устройстве iOS, если это поможет вам ответить.

Вы должны включить onMessage={(event) => {}} в WebView

https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md

Событие onMessage также требуется для ввода кода JavaScript в веб-представление.

 <WebView 
      source={{ uri: "https://www.google.com/" }}
      renderLoading={LoadingIndicatorView}
      startInLoadingState={true}
      javaScriptEnabled={true}
      injectedJavaScript={runFirst}
      onMessage={(event) => {}}
/>