React Native - Webview 호출 Reative 네이티브 기능

Question

WebView 구성 요소 내에서 함수를 생성하고 React Native 기능을 사용할 수 있습니까?

Answer 1

가능 합니다만 이것이 유일한 방법인지는 확실하지 않습니다.

기본적으로 onNavigationStateChange 이벤트 핸들러를 설정하고 탐색 URL에 함수 호출 정보를 포함 할 수 있습니다. 여기에 개념 예가 나와 있습니다.

에서이

render() { 

    return <WebView onNavigationStateChange={this._onURLChanged.bind(this)} /> 
} 

_onURLChanged(e) { 

    // allow normal the natvigation 
    if(!e.url.startsWith('native://')) 
     return true 
    var payload = JSON.parse(e.url.replace('native://', '')) 
    switch(e.functionName) { 
     case 'toast' : 
      native_toast(e.data) 
     break 
     case 'camera' : 
      native_take_picture(e.data) 
     break 
    } 
    // return false to prevent webview navitate to the location of e.url 
    return false 

} 

그냥 웹보기의 탐색 이벤트를 트리거 이것을 사용, 네이티브 메소드를 호출하려면 기본 컨텍스트를 반응 URL의 함수 호출 정보를 포함.

window.location = 'native://' + JSON.stringify({ 
    functionName : 'toast', data : 'show toast text' 
}) 

Answer 2

이 예는 가능, 그 react-native-webview-bridge에 대한 패키지를 existe. 나는 그것을 생산에 많이 사용했고 완벽하게 작동합니다.

는

Answer 3

당신은 부하에 웹뷰에 자바 스크립트 함수를 삽입 할 수 있으며, 다음 IN Here

Answer 4

나는 확실하지 않다 더 많은 정보를 주입 된 함수로부터 응답을 얻을 수의 onMessage를 사용하지만, 내 생각은 - 당신이 할 수있는

아니. Webview는 Webview 구성 요소에서 정의 할 수있는 js 부분 만로드 할 수 있습니다. 이것은 다른 구성 요소와 완전히 별개이며 단지 볼 수있는 영역입니다.