React Native 로 local html을 webview 에 적용하기

Posted on Edited on In , Word count in article: 351 Reading time ≈ 1 mins.

리액트네이티브에 웹뷰 적용

앱 내부에 HTML 컨텐츠를 적용하려고 한다

웹뷰적용

리액트 네이티브에 웹뷰를 적용하는 방법은 아래와 같습니다

React Native 로 webview 만 있는 앱 만들기

이거는 html 태그 또는 외부 URL을 사용할 때고

인터넷 필요없는 html 적용

html, js, css 파일을 asset 으로 적용해서 WebView 로 표시 할 수 있다

일단 만들기 전에 패키지 명 부터 바꾸자…나중에 후회한다
특히 안드로이드 APP

React Native 로 패키지 이름 바꾸기

세가지 작업 필요

[] 리액트 네이티브에서 WebView 파일을 만들어준다
[] html, css, js 파일이 있는 html 폴더를 만들어준다
[] 안드로이드, iOS 에서 html 폴더를 자산으로 등록해준다
[] MyWebView 에서 안드로이드, iOS 의 경우 uri 를 틀리게 지정해준다

리액트 네이티브에서 WebView 파일을 만들어준다

1
2
3
4
## 웹뷰를 설치해주고
npm install react-native-webview
## ios 에도 적용
cd ios && pod install && cd ..

폴더 구조 만들고

1
2
3
index.js
  - src/App.js
  - src/components/MyWebView.js

index.js 는 app.js 만 사용하면 되고

App.js 는 MyWebView 컴포넌트를 사용

실제 메인소스는 MyWebView 에 있습니다

html, css, js 파일이 있는 html 폴더를 만들어준다

로컬 html, css, js 파일을 모아서

1
html > Web.bundle  폴더를 생성합니다

Web.bundle 폴더 안에 index.html 이 들어갑니다

안드로이드, iOS 에서 html 폴더를 자산으로 등록해준다

안드로이드

안드로이드 스튜디오를 실행하고
app 아래에 New > Folder > Assets Folder 를 생성합니다
Change Folder Location 을 체크하고 ../../html 를 입력합니다

그러면 app > assets 폴더가 생기면서 Web.bundle 폴더를 하위로 갖게 됩니다

iOS

Xcode 로 프로젝트를 실행하고
Web.bundle 폴더를 프로젝트 밑으로 드래그 합니다

팝업이 떴을때
[] Copy items if needed 는 체크 하지 않습니다

그러면 dk2(프로젝트명) 밑으로 Web.bundle 폴더가 생깁니다.

MyWebView 에서 안드로이드, iOS 의 경우 uri 를 틀리게 지정해준다

1
- src/components/MyWebView.js

웹뷰 컴포넌트로 들어가서

1
2
3
4
5
6
7
8
9
10
11
12
const isAndroid = Platform.OS === 'android';
...
const sourceUri = (isAndroid ? 'file:///android_asset/' : '') + 'Web.bundle/index.html';
...

  return (
    <WebView
      source={{uri : sourceUri}}
      ...
    >
  )
...

이런식으로 안드로이드 일 경우는 file 을 사용하고
iOS 일 경우는 Web.bundle 로 시작하게 하면

로컬에 있는 index.html 이 webview 를 이용해서 불러올 수 있습니다.

연관포스트