내가 웹보기 렌더링하기 위해 다음 코드를 사용하고

Question

기본 반응 :이 HTML 파일에서

const someHTMLFile = require('./somefile.html') 
render() { 
    return (
    <View style={{flex: 1}}> 
     <WebView 
      style={{flex: 1}} 
      source={someHTMLFile} 
      ref={(webView) => this.webView = webView} 
     />  
    </View> 
); 
} 

을 자동으로 제출 양식이있을 때 웹보기로드 (일부 데이터는 코드의 반응 부분에서 전송 됨) 결국 파일은 특정 URL로 리다이렉트되고 일부 처리가 (데이터 전송시) 수행되며 현재는 아무 것도 반환하지 않습니다. 그래서 화면이 공백이됩니다.

이 시점에서 나는 webview를 닫고 사용자를 내 reactnative 앱으로 다시 가져 가고 싶습니다. 어떻게 할 수 있습니까? 어떤 제안?

Answer 1

Webview에는 웹보기로드가 시작되거나 끝날 때 기초를 제공하는 onNavigationStateChange 소품이 있습니다.

따라서이 웹 사이트의 현재 상태 나 현재 URL을 확인하고 웹보기를 닫는 데 사용할 수 있습니다.

render() { 
    return (
     <View style={{flex: 1}}> 
      <WebView 
       style={{flex: 1}} 
       onNavigationStateChange={(e) => { 
        console.warn("current state is ", JSON.stringify(1, null, 2)); 
        /** put your comdition here based here and close webview. 
        Like if(e.url.indexOf("end_url") > -1) 
        Then close webview 
        */ 
       }} 
       source={someHTMLFile} 
       ref={(webView) => this.webView = webView} 
      /> 
     </View> 
    ); 
} 

Answer 2

닫기 WebView은 기본적으로 구성 요소를 마운트 해제하는 것과 같습니다. 조건부 렌더링을 수행하여 구성 요소를 마운트하거나 마운트 해제 할 수 있습니다. 일반적인 동작은 WebView이 들어있는 Modal을 여는 것입니다. WebView으로 끝내면 반응 할 메시지를 보내고 모달을 닫을 수 있습니다. 이렇게하면 모달과 WebView이 마운트 해제됩니다.

onMessage 소품을 사용하면 WebView와 React-Native간에 통신 할 수 있습니다.

호출되는 함수 때 webview 통화 window.postMessage. 이 속성을 설정하면 webview에 postMessage 전역이 삽입되지만 여전히 의 기존 값은 postMessage입니다.

예

_onMessage = (message) => { 
    console.log(message); 
} 

render() { 
    return (<WebView ref={(ref) => { this.webView = ref; }} onMessage={this._onMessage} ..otherProps />); 
} 

---

// In your webview inject this code 

<script> 
    window.postMessage("Sending data from WebView"); 
</script>