react-native-webView で android/ios共通アセットを表示する

react-nativeプロジェクトに以下を配置してあるとします。

awesomeWebViewApp/
 |- android/
 |- ios/
 |- webViewAssets
 |    |- assets/
 |         |- view1/   //<=これを表示したい
 |             |- index.html
 |             |- bundle.js
 |- App.js
 :

Android向けの準備

android/app/build.gradle に以下を記述します。

  :
android {
    :
    sourceSets {
        main {
            assets.srcDirs = ["../../webViewAssets/assets"]
        }
    }
}

iOS向けの準備

webViewAssets/assets/ を Finder から XCode の Project Navigator (左ペインのプロジェクト階層を表示しているやつ) へドロップして Added folders - Create folder reference
で追加します。

WebViewへの指定

• Android と iOS で uri が違うので切り分ける
• (iOSで) originWhitelist: ['*'] が必要

GitHub - suzumura-ss/awesomeWebViewApp: example of React-Native WebView

import React from 'react';
import {SafeAreaView, StatusBar, Platform} from 'react-native';
import {WebView} from 'react-native-webview';


export default function App () {
  const viewStyle = { flex: 1 };
  const webViewConfig = {
    //startInLoadingState: true,
    //scalesPageToFit: true,
    javaScriptEnabled: true,
    //domStorageEnabled: true,
    //ignoreSslError: true,
    originWhitelist: ['*'],
    // allowFileAccess: true,
    // allowUniversalAccessFromFileURLs: true,
    style: { flex: 1 },
    source: (Platform.OS === 'android')
      ? { uri: 'file:///android_asset/view1/index.html' }
      : { uri: './assets/view1/index.html' }
  };
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={viewStyle}>
        <WebView {...webViewConfig} />
      </SafeAreaView>
    </>
  );
}