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

  1. フロントエンド
  2. 1075 view

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

最終更新日:2018/12/16

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

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

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


出典 pbs.twimg.com

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

環境

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/[email protected]" has unmet peer dependency "@babel/[email protected]^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

Introducing Vue Native

The following two tabs change content below.
WINDII

WINDII

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

フロントエンドの最近記事

  1. IOSアプリをAppStoreに公開する手順書(Ionic)

  2. IonicAcademyでIonic&Angularでのアプリ開発を学ぶ

  3. Ionic4+firebaseで認証をする方法【ログイン、ログアウト機能の実装】

  4. ハイブリッドアプリ開発チュートリアル【Ionic4+OnsenUI】

  5. Ionic4+Angular Materialの始め方【Ionic事前調査兵団】

関連記事

コメント

  1. この記事へのコメントはありません。

  1. 2019年 1月 17日
    トラックバック:vue nativeの環境構築 – F27P
PAGE TOP