react-native에서 WebView사용

(수정)

react-native-webview를 쓸 경우에는 frontEnd에서 RN으로 데이타를 보낼때,

window.postMessage 대신에 => window.ReactNativeWebView.postMessage 를 쓰면 됩니다. 

 

==============

import { WebView, NativeModules } from 'react-native';

(react-native-webview가 별도로 나오고 있지만, 아직은 쓰기가 좀 어려운 듯합니다)

 

• react-native WebView에서 웹페이지로 부터 데이터 주고 받을 때.

    doMyCode = () => {
    	this.myWebView.postMessage(data);   //프런트엔드로 메시지 송신
     }
     
    render() {
        return (
            <WebView
                ref={webview => { this.myWebView = webview; }}
                source = {{uri: "http://localhost:3000/userPhone/main"}}
                style = {{marginTop : 65}}
                onMessage = {(event) => this.doMyCode()}   //프런트엔드에서 메시지 수신
            />
        )
    }

 

• webView 뒤로가기가 잘안되므로, 코딩으로 추가 방법  : test필요

 
onNavigationStateChange = (navState) => {
  this.setState({
    canGoBack: navState.canGoBack
  });
}

//back버튼시 아래 호출,
onBack = () => {
  if (this.state.canGoBack)
    this.refs[WEBVIEW_REF].goBack();
  else
    app종료.
}

<View style={styles.container}>
  <WebView
    ref={WEBVIEW_REF}
    style={{flex: 1}}
    onNavigationStateChange=
      {this.onNavigationStateChange}
    /> 
 </View>

 

• REF

Adding a Back Button for React Native WebView