[React-Native] react-native-webview 에러 해결

발생한 문제

 - react-native 환경에서 웹뷰 테스트를 위해 프로젝트를 생성하여 App.js 내부에 <WebView> 를 작성하였으나 webview를 사용할 수 없다고 에러 메시지 발생

 

에러 메시지1 : react-native link react-native-webview not working

해결방법

 1. 프로젝트 생성시 react-native 버전을 0.69 이하 버전으로 설정(0.69 버전부터 webview가 삭제되었다고 함)

  - 명령어 : react-native init andProject --version=0.68.1

 

에러 메시지2 : react-native-webview could not be found within the project or in these directories
(react-native-webview는 프로젝트 또는 이 디렉토리에서 찾을 수 없습니다.)

해결방법

 1. Project_Name/node_modules 디렉터리에 react-native-webview 가 있는지 확인

 2. 없을 경우 Project_Name/node_modules 위치에서 npm install react-native-webview 수행

 3. react-native-webview 디렉터리가 생성되었는지 확인

 

WebView 정상 동작여부 테스트

//테스트 코드(App.js)
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Dimensions
} from 'react-native';

import { WebView } from 'react-native-webview';

const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;

type Props = {};
export default class App extends Component<Props> {

  render() {
    return (
<View style={{flex:1}}>
  <WebView
   style={styles.webview}
   source={{uri: 'TestURL'}}
   javaScriptEnabled={true}
   domStorageEnabled={true}
   startInLoadingState={false}
   scalesPageToFit={true} />
</View>
    );
  }
}

const styles = StyleSheet.create({
  webview: {
    flex: 1,
    width: deviceWidth,
    height: deviceHeight
  }
});