React-native-webview back button

 

React 네이티브를 사용했을 때 back button을 누르면 엡이 종료가되는데

이를 방지하기 위해서 아래와 같은 코드가 들어가잇으면 됩니다.

 

 

webView = {
    canGoBack: false,
    ref: null,
  }

  onAndroidBackPress = () => {
    if (this.webView.canGoBack && this.webView.ref) {
      this.webView.ref.goBack();
      return true;
    }
    return false;
  }

  componentDidMount() {
    if (Platform.OS === 'android') {
      BackHandler.addEventListener('hardwareBackPress', this.onAndroidBackPress);
    }
  }

  componentWillUnmount() {
    if (Platform.OS === 'android') {
      BackHandler.removeEventListener('hardwareBackPress');
    }
  }

 

 

 return (
      <View style={{ flex: 1, marginTop:20 }}>
        <WebView
          source={{
            uri:
              'https://url 주소',
          }}
          ref={(webView) => { this.webView.ref = webView; }}
          onNavigationStateChange={(navState) => { this.webView.canGoBack = navState.canGoBack; }}
      </View>
    );

 

 

이러면 잘 작동 하네요