🔥Webサービス開発ログ Part 4 (React Navigation with React Native for Web)

はじめに

このエントリは、Webアプリの開発進捗を記録しているシリーズです。

ソースコードはこちらです。

開発中のアプリをFirebaseにデプロイしていますので、よかったらこちらを見てみてください😆

React Navigationの導入

タブバーを追加したい!でも1から実装するのは面倒!

なのでReact Navigationを使いたいと思います。

React Navigationは全てJavaScriptで実装されているので、理論的にはReact Native for Webでも利用できるはずです。

インストールします。

$ yarn add react-navigation

react-navigationのビルドエラーが発生〜><

ERROR in ./node_modules/react-native-web/dist/exports/ART/index.js
Module not found: Error: Can't resolve 'react-art' in './node_modules/react-native-web/dist/exports/ART'
 @ ./node_modules/react-native-web/dist/exports/ART/index.js 1:0-28 2:15-18
 @ ./node_modules/react-native-web/dist/index.js
 @ ./node_modules/react-navigation/src/views/Header/Header.js
 @ ./node_modules/react-navigation/src/react-navigation.js
 @ ./src/TabRoot.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./src/index.js

ERROR in ./node_modules/react-navigation/src/views/assets/back-icon-mask.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/react-navigation/src/views/Header/Header.js 1:13167-13206
 @ ./node_modules/react-navigation/src/react-navigation.js
 @ ./src/TabRoot.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./src/index.js

ERROR in ./node_modules/react-navigation/src/views/assets/back-icon.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/react-navigation/src/views/Header/HeaderBackButton.js 1:2657-2691
 @ ./node_modules/react-navigation/src/react-navigation.js
 @ ./src/TabRoot.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./src/index.js

画像ファイルのインポートに失敗しているので、webpack.common.configを修正します。

まずfile-loaderをインストールします。

$ yarn add file-loader

webpack.configに以下を追記します。

module.exports = {
  module: {
    rules: [
      {
        test: /.(png|jpg|gif)$/,
        use: {
          loader: 'file-loader',
        }
      }
    ]
  }
}

react-artのエラーはどうするか?

エラー内容でググってみたところ、react-native-webのリポジトリのIssueに答えを発見。

react-artをインストールすれば解決するようです。

$ yarn add react-art

これでよし。

と、コンパイルは通ったものの、実行時エラーが発生。

__DEV__ is not defined

react-nativeのリポジトリを検索したところ、React Nativeで定義されているグローバル変数です。

React Native for Webでは存在しないグローバル変数のため、webpackのDefinePluginで解決することにします。

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      '<strong>DEV</strong>': false,
    }),
  ],
}

これで動くかな??

.
.
.
.
.

img

動いたー!React NavigationがReact Native for Webで使えるか確信が全然なかったので、 メチャクチャ嬉しかったです😆

苦労したついでに、Githubにシンプルなサンプルアプリを公開しておきました〜

おしまい!

Please follow and like us:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です