VueNative環境構築時のExpoエラー対応

フロントエンド
1913 view

VueNative環境構築時のExpoエラー対応

最終更新日:2018/12/16

Next.js →　Nuxt.js
React Native →　Vue　Native

そう、後続のが常に強い。
そして、Ionicとかよりは俄然強い、と勝手に思っているVueNativeをちょっと入門していきたいと思います。

あんなアプリや、こんなアプリを作るために、、

出典 pbs.twimg.com

途中で、Expoエラーと戦う記事に代わります

環境
VueNativeとは
VueNativeに入門
- 前提環境の構築
Vue Native Cliを利用してVueNativeアプリを作成
起動 & 確認
Expoのアプリをインストールする
Expoのエラーに対応
- package.jsonとapp.jsonの編集。
- キャッシュを決して再起動
  - WINDII
  - 最新記事 by WINDII (全て見る)

環境

npm 6.5.0
node v11.4.0
expo 31.0.6
vue-native 0.0.0
Mac OS High Sierra 10.13.4

VueNativeとは

Vue.jsで美しいネイティブアプリを作るためのフレームワーク
クロスプラットフォーム対応だから、AndroidもiOSも同時に作れちゃう。
vuexなども使えて、Web開発感覚で、ネイティブアプリが作れる。
React NativeのAPIを使用してるけど、JSXに触れなくていい。

2018/6/12日にリリースされた。

ネイティブアプリとは
 VueNative

VueNativeに入門

公式の手順通りに入門していきます。

前提環境の構築

グローバルにNodeのバージョン6.0以上が入っている
グローバルにNPMのバージョン4.0以上が入っている
グローバルに React Native CLIが入っている
グローバルに create-react-native-appが入っている

ターミナルに移動して

node -v
npm -v

上二つはクリアです。
version

まだインストールしてなかった方はこちらから
Node.js

React Native CLIとcreate-react-native-appのインストール

npm install -g react-native-cli
npm install -g create-react-native-app

Vue Native Cliを利用してVueNativeアプリを作成

VueNativeアプリを作る最短の道は、vue-native-cliを用いてコマンドをぽちぽち打っていくとのこと。

vue-native-cliのインストール&プロジェクトの作成

npm install -g vue-native-cli
vue-native init vue-native-project//vue-native-projectは任意のプロジェクト名

おっと話しかけられた、最近のcliはよく話しますね＾＾

expo

このコマンドには、Expo CLIが必要です。
それをグローバルにインストールしますか？[Y / n]

Expoを調べてみたところ、React Nativeのビルドや開発を支援してくれるサービスとの事。
是非お願いしましょう。y

Expo CLI

次に、テンプレートの選択をどうするかと話しかけられます。
template-select

blankとtabsがあるのですが、ミニマリストを目指して、blankを選択します。

次は、yarnでインストールする？って話しかけられました。
是非お願いしましょう
yarn

準備ができたようです。

起動 & 確認

cd vue-native-project
npm start

なかなか巨大なQRコードです。
terminal

自動的にsafariが開かれて以下のような画面が出てきました。
safariをデフォルトのブラウザにしない？と話しかけてきたので拒否します。

iを押すとiOSsimulatorが使えるようです。
ポチっ

HelloWorld的なアプリの画面を期待したのですが、iphoneをいじれるだけ、、
どうやら、Xcodeのバージョンをダウングレードしないといけない？
ios

それは、不服なので、Expoアプリでの確認を試みます。

Expo app does not open in ios simulator

Expoのアプリをインストールする

先程のQRコードは、iphoneでの実機確認用です。
Expoアプリをインストールして、カメラでQRコードを読み取ってみましょう。
エラーが出ています。

expo error

Unable to resolve "../../App" from "node_modules/expo/AppEntry.js"

どうやら最新バージョンのExpoに問題があったよう。
Setup with Vue Native Cli does not work87
Setup with Vue Native Cli does not work101

Expoのエラーに対応

vue-nativeにはreact-nativeのバージョン0.55.4が必要だけど、それだけを変更すると、エラー祭りで、babel-preset-expoとexpoをダウングレード、app.jsonのsdk-versionを29.0.0に変更する必要があるとの事。

そういば作成時にwarningが出ていました。

warning "expo > babel-preset-expo > metro-react-native-babel-preset > @babel/plugin-transform-react-jsx-source > @babel/plugin-synt[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".

package.jsonとapp.jsonの編集。

package.json

{
  "name": "empty-project-template",
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^29.0.0",
    "react": "16.5.0",
    "react-native": "0.55.4",
    "vue-native-core": "0.0.8",
    "vue-native-helper": "0.0.9"
  },
  "devDependencies": {
    "babel-preset-expo": "^4.0.0",
    "vue-native-scripts": "0.0.14"
  }
}

app.json

{
  "expo": {
    "name": "firstApp",
    "description": "This project is really great.",
    "slug": "firstApp",
    "privacy": "public",
    "sdkVersion": "29.0.0",
    "platforms": [
      "ios",
      "android"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "packagerOpts": {
      "config": "rn-cli.config.js"
    }
  }
}

キャッシュを決して再起動

npm cache clean --force
npm install
npm start

成功しました。めでたし、めでたし
expo-success

vuenative

React Native入門〜Expoを使ってお手軽開発

React NativeとはjavascriptとReactを使ってiOSとAndroidのネイティブアプリが両方作れてしまう優れもの。今回はExpoというツールを使ってReact Nativeをサクッと導入する方法を紹介します！Node.jsのインストールまずはNode.jsがインストール済かチェックします。no...

Introducing Vue Native

この記事を書いた人
最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

WINDIIテック