Question

WebView加载网页

我需要在页面中调用React-Native组件方法

class Mwap extends Component {

constructor(props) {
    super(props);
    this.injectScript = `
        function setTitle(title){
            mwap.MyClick();
        }
    `;
}

componentDidMount(){
    window.mwap = this;
}

MyClick(){
    console.log('Call me');
}

render() {
    return (
        <View style={styles.container}>
            <MwapHeader
                goBack={this.goBack.bind(this)}
                closeWebView={this.closeWebView.bind(this)}
                toonShare={this.toonShare.bind(this)}
            />
            <View style={styles.line}/>
            <WebView
                ref={(ref) => {
                    this.webView = ref;
                }}
                automaticallyAdjustContentInsets={false}
                style={styles.webView}
                source={{uri: this.props.url}}
                injectedJavaScript={this.injectScript}
                javaScriptEnabled={true}
                domStorageEnabled={true}
                decelerationRate="normal"
                startInLoadingState={true}
                scalesPageToFit={true}
            />
        </View>
    );
}
}

我用injectScript注入了一个函数

此函数调用Mwap组件的方法

我设置了window.mwap = this;

但是在页面中，window.mwap未定义

如何在加载WebView的网页中调用React组件方法？

请帮帮我

谢谢

Answer 1

您注入的JavaScript代码与您的React Native JavaScript代码没有任何关联。您在注入的JS中使用的mwap变量与组件的变量没有任何关系。我担心这种行为是不允许的。但是，您可以检查this answer替代方案或react-native-webview-bridge包。

关于在WebView for React-Native中的injectScript

1 个答案: