Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@noboru_i

React Native for WebをElectronで動かす

More than 3 years have 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

4
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  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
noboru_i
Androidを中心に、iOSやサーバサイドも少しだけやっています。 CircleCIやDangerといった、CI/CD周りにも興味があります。
monstar-lab
自社サービス「モンスター・チャンネル」や「セカイラボ」をはじめ、日本を代表する企業のWeb・アプリの受託企画/開発を行っています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?