[React Native] Go Back시에 웹뷰를 벗어나는 것 방지



태그: ,

2 글 보임 - 1 에서 2 까지 (총 2 중에서)
  • 글쓴이
  • #14146
    mimoon
    키 마스터

    안드로이드 back 버튼을 누르면 웹뷰 스택이 앱 밖으로 튀겨버린다. 이런 경우 go back버튼과 웹뷰 스택의 뒤로가기를 한데 묶어야 함.
    그리고 해당 페이지가 첫 페이지인 경우 뒤로 가기는 앱 빠져나오도록 설정.

    
    import React, { Component } from 'react';
    import { BackHandler} from 'react-native';
    import { WebView } from 'react-native-webview';
    
    // ...
    class MyWebComponent extends Component {
      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');
        }
      }
    
      render() {
        return (
          <WebView
            source={{ uri: "https://m.blog.naver.com/PostList.nhn?blogId=rlaalsdn456456" }}
            ref={(webView) => { this.webView.ref = webView; }}
            onNavigationStateChange={(navState) => { this.webView.canGoBack = navState.canGoBack; }}
          />
        );
      }
    }
    
    export default MyWebComponent
    

    참고 자료

    #14147
    mimoon
    키 마스터

    일반적인

    
    import * as React from 'react';
    import { WebView } from 'react-native-webview';
    
    export default class App extends React.Component {
      render() {
        return <WebView source={{ uri: 'https://mimoonchurch.net' }} style={{ marginTop: 20 }} />;
      }
    }
    
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
  • 답변은 로그인 후 가능합니다.