injectedJavaScript ne fonctionne pas dans Webview de réagir natif

Question

Je ne suis pas en mesure d'injecter ce code js simple dans le webview réagissant-natif.

I referred this link also but no solution provided here.

Then I found this one which works for html props but not uri.

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

export default class App extends Component<{}> { 

    injectjs(){ 

    let jsCode = 'alert(hello)'; 
    return jsCode; 
    } 

    render() { 
    return <WebView 
    javaScriptEnabled={true} 
    injectedJavaScript={this.injectjs()} 
    source={{uri:"https://www.google.com"}} style={{ marginTop: 20 }} />; 
    } 
} 

Answer 1

Le problème est que le code Javascript doit être exécuté après la charge complètement WebView.

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

export default class App extends Component { 

    injectjs() { 

    let message = "Hello"; 

    let jsCode = ` 
     setTimeout(() => { 
     alert('${message}'); 
     }, 1500)`; 

    return jsCode; 
    } 

    render() { 
    return <WebView 
     javaScriptEnabled={true} 
     injectedJavaScript={this.injectjs()} 
     source={{ uri: "https://www.google.com" }} style={{ marginTop: 20 }} />; 
    } 
} 

Vous pouvez utiliser setTimeout pour charger votre code Javascript quelques secondes après la WebView charge complètement.

Aussi, je vous recommande d'utiliser `` au lieu de '' avec elle vous pouvez mettre d'autres variables à l'intérieur de votre variable.

Exemple

injectjs(){ 

    var message = "Hello"; 

    let jsCode = `alert('${message}')`; 
    return jsCode; 
} 

Answer 2

Eh bien, vous avez plus d'un problème ici. La première est que votre vue Web doit être enveloppée dans un composant View contenant flex: 1. Deuxièmement, injectedJavascript n'accepte qu'une chaîne - pas une fonction. Troisièmement, il semble que vous essayez d'utiliser hello comme variable sans le définir, ou s'il s'agit d'une chaîne, votre syntaxe doit ressembler à ceci: injectedJavascript = {'alert ("hello")'}. En outre, injectedJavascript est déjà déclenché lorsque la vue se charge de sorte que vous êtes tous bien là si c'est ce que vous avez l'intention de faire. Vous pouvez injecter javascript lorsque la vue Web commence à charger, en utilisant une combinaison des accessoires, onLoadStart et injectJavascript, mais la mise en œuvre est très différente, donc c'est une question différente. Essayez ce code:

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

export default class App extends Component { 

    render() { 
    let yourAlert = 'alert("hello")' 
    return (
    <View style={{flex: 1}}> 
     <WebView 
     javaScriptEnabled={true} 
     domStorageEnabled={true} 
     injectedJavaScript={yourAlert} 
     source={{ uri: "https://www.google.com" }} style={{ marginTop: 20 }} /> 
    </View> 
    ) 
    } 
}