Как выполнить Javascript в React-Native WebView?

Question

Я пытаюсь выполнить javascript в WebView, загруженном по рекомендации iOS. Я пытаюсь заставить мучительно простой пример работать, но он постоянно выдает неопределенную ошибку или TypeError.

Вот код:

import React, { Component } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { WebView } from 'react-native-webview';

export default class App extends Component {

  constructor(props){
    super(props)
    this.onPressButton = this.onPressButton.bind(this)
  }

  onPressButton(){
    this.webview.injectJavascript(`alert('hello')`)
  }

  render() {
    return (
      <View style={{ height: '100%' }}>
        <WebView
          ref={ref => (this.webview = ref)}
          javaScriptEnabled={true}
          source={{ uri: 'https://google.com' }}
        />
        <Button onPress={this.onPressButton} style={{ height: '10%' }} title="Test Javascript" />
      </View>

    );
  }
}

Пожалуйста, не рекомендуется использовать инъекцию Javascript потому что это не моя желаемая функциональность.

Буду признателен за любые другие подходы.

Answer 1

Согласно реагировать-родной-веб-просмотр , вам нужно использовать injectJavaScript, а не injectJavascript. Это исправит вашу проблему.

Также есть несколько вещей, которые нужно изменить

1. Вам не нужно связывать this.onPressButton = this.onPressButton.bind(this), вместо этого вы можете использовать функцию стрелки.
2. Вам не нужно использовать javaScriptEnabled={true}. Он уже использует значение по умолчанию как true.
3. После того, как ваш скрипт включает true. Это необходимо, иначе вы иногда будете молчать.

Проверьте полный пример кода

import React, { Component } from "react";
import { View, Button } from "react-native";
import { WebView } from "react-native-webview";

const script = `
    alert('hello')
    true;
    `;

export default class App extends Component {

  onPressButton = () => {
    this.webview.injectJavaScript(script);
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <WebView
          ref={ref => (this.webview = ref)}
          source={{ uri: "https://google.com" }}
        />
        <Button onPress={this.onPressButton} title="Test Javascript" />
      </View>
    );
  }
}

Надеюсь, это поможет вам. Не стесняйтесь сомнений.