Help us understand the problem. What is going on with this article?

React Native for WebをElectronで動かす

More than 1 year has passed since last update.

前回(React NativeをExpo無しで始めて、React Native for Webも動かすまで - Qiita)は、React NativeでiOS/Androidが動作し、React Native for Webでブラウザ上での動作まで確認できました。

今回は、それをElectron上で動かし、デスクトップアプリ化してみようと思います。

環境

前回の環境から少しアップデートしています。

macOS 10.13.3
Node.js 8.10.0

react 16.2.0
react-native 0.54.2
react-native-web 0.5.3

そこに今回、書きを追加します。

react-native-electron 0.4.2
electron 1.8.4
webpack-serve 0.2.0

実際には、下記を実行しました。

yarn add react-native-electron
yarn add -D electron
yarn add -D webpack-serve

Electron動作用のファイルを準備する

https://github.com/PaulLeCam/react-native-electron/tree/master/example にあるファイルを参考に、ファイルを配置していきます。

今回は、前回用意した web ディレクトリと並列に electron ディレクトリを作成し、その中に置いていきます。

electron/webpack.config.js

https://github.com/PaulLeCam/react-native-electron/blob/master/example/webpack.config.js をコピーします。

そのままだと、

Module not found: Error: Can't resolve 'react-native'

というエラーが出てしまうので、READMEに記載してあった https://github.com/gh-viewer/client/blob/master/webpack.config.js を参考に、
'react-native': 'react-native-electron' に変更しました。

electron/app/renderer.js

続いて、上記のwebpackの設定で出てきた renderer.js を作成します。

こちらも、 https://github.com/PaulLeCam/react-native-electron/blob/master/example/app/renderer.js をコピーします。

App の位置が違っているので、
2箇所ある ./App../../src/App に変更しました。

electron/app/main.js

続いて、Electron実行時のentry pointとなるjsファイルです。

https://github.com/PaulLeCam/react-native-electron/blob/master/example/app/main.js をコピーします。

こちらは、このままでも問題なかったのですが、
https://electronjs.org/docs/tutorial/first-app にある、Electron公式チュートリアルを参考に、

const path = require('path');
const url = require('url');
...
  win.loadURL(
    url.format({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
    })
  );

のように書き換えてみたり、 win.webContents.openDevTools(); を追加してみました。

electron/app/index.html

実際に読み込むhtmlファイルです。

https://github.com/PaulLeCam/react-native-electron/blob/master/example/app/index.html をコピーして、そのまま利用しました。

package.json

ルートにある package.json に、起動用のスクリプトを追加しました。

  "scripts": {
    "start:electron:server": "webpack-serve ./electron/webpack.config.js",
    "start:electron:client": "electron ./electron/app/main.js",
  },

起動してみる

まずは、 bundle.js を配信するためのサーバを立ち上げます。

yarn start:electron:server

この状態で、 http://localhost:7000/bundle.js にアクセスすると、コンパイルされたjsファイルが確認できました。

続いて、Electronアプリを起動します。上記のサーバは立ち上げたまま、別のウインドウを用意して、

yarn start:electron:client

を実行します。
すると、Dev Toolsとともに、作成したアプリが表示されます。

image.png

src/App.jsにある文字列を書き換えて保存すると、サーバの方が自動的に再コンパイルを行いました。
ただ、Electronの方をhot reloadさせようとすると、別のパッケージが必要なようなので、今回は見送ります。
現状でも、Electronのアプリにて Cmd+rを押すことで、書き換え後の文字列が表示されました。

これで、React Nativeで作成したアプリを、デスクトップアプリとして動かすこともできそうです。

今回の変更点は、 https://github.com/noboru-i/Memo2GitHub/pull/1/files にあります。

参考

https://github.com/PaulLeCam/react-native-electron のサンプルコード
https://github.com/gh-viewer/client のwebpack.config.jsなどの設定
https://electronjs.org/docs/tutorial/first-app

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away