[React Native] Webview 오류

또잉의 공부일지·2023년 8월 28일
Cannot read properties of null (reading 'useContext') 

오류가 계속 떴다.

계속 stack overflow 해결책들을 적용해보다가
react natvie 공식 홈페이지 매뉴얼
https://reactnative.dev/docs/custom-webview-android
을 참고,
https://github.com/react-native-webview/react-native-webview/blob/master/docs/Getting-Started.md
위의 깃허브 리포로 해결했다.

$ yarn add react-native-webview
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';

class MyWeb extends Component {
  render() {
    return (
      <WebView
        source={{ uri: 'https://infinite.red' }}
        style={{ marginTop: 20 }}
      />
    );
  }
}

이 코드 참고하여 다시 짰더니

React Native WebView does not support this platform.

오류가 떴다.

2020년 기준 expo-web에서 WebView가 unsupported였다고 한다.

https://stackoverflow.com/questions/60592332/reactnative-webview-not-rendering-on-web-but-works-fine-on-android
의 아래 코드:

export default class App extends React.Component {
  render() {
    return Platform.OS === "web" ? (
      <iframe src="https://www.somedomain.com/" height={'100%'} width={'100%'} />
    ) : (
      <View style={{ flex: 1 }}>
        <WebView
          source={{ uri: "https://www.somedomain.com/" }}
          style={{marginTop: 22, flex: 1}}
        />
      </View>
    )
  }
}

참고하여 iframe으로 바꿔줬더니 정상적으로 나온다.

++그 과정에서 계속 WebView에 빨간 줄 뜨면서

~~ cannot be used as a JSX component

하는 오류 계속 계속 찾아봤었는데...ㅠㅠㅠ 버전 관련 문제인 건지 해서 엄청 골머리를 앓았지만 별 문제 없는 것 같다. 일단 js타입으로 파일 새로 파서 위 처럼 했다.

0개의 댓글