injectJavaScript在反應原生Webview中不工作

我無法將這個簡單的js代碼注入react-native webview。injectJavaScript在反應原生Webview中不工作

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 }} />; 
    } 
}

來源

2017-10-11 Kapil Yadav

的問題是，因爲Javascript代碼需要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 }} />; 
    } 
}

可以使用setTimeout爲WebView完全加載後幾秒鐘加載JavaScript代碼。

此外，我建議您使用``而不是''，您可以將其他變量放入變量中。

例

injectjs(){ 

    var message = "Hello"; 

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

來源

2017-10-11 15:30:33

不能工作。我嘗試了很多格式。關於配置的一些細節：平臺：Android 6，SDK：23/24，react-native版本：0.49.3。 –

當您在iOS/Android中運行react-native時，您能看到WebView嗎？因爲如果你看不到WebView，那麼問題可能不是你的Javascript代碼。 @KapilYadav –

我在這裏發佈的代碼可以在webview中成功打開google.com或任何其他網站，但我看不到警報。如果我在源代碼中使用HTML而不是URI，那麼它將很好地工作。在你的設備上？@ Mateo Guzman。 –

好了，你在這裏有一個以上的問題。第一個是你的web視圖需要用flex包含在一個包含View的組件中：1.其次，injectJavascript只接受一個字符串 - 而不是一個函數。第三，你似乎試圖將hello作爲一個變量來使用，而不是定義它，或者如果它是一個字符串，而不是你的語法需要像這樣：injectJavascript = {'alert（「hello」）'}。此外，當視圖加載時注入JavaScript已經被觸發，所以如果這是你打算做的事情，那麼你們都很好。您可以在Web視圖開始加載時注入JavaScript，但使用道具，onLoadStart和injectJavascript的組合，但實現完全不同，所以這是一個不同的問題。試試這個代碼：

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> 
    ) 
    } 
}

來源

2017-11-01 19:00:47 bagofcole

injectJavaScript在反應原生Webview中不工作

回答

相關問題