プログラミング学習やフリーランスエンジニア情報を発信していきます。現役フリーランスエンジニア2人で運営してます!

  1. フロントエンド

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.

ぞえ

実務未経験から1年でフリーランスエンジニアになって給料が6倍になった男/アル中の記憶ない系/しかも190cmの巨人。今は週3勤務しながら@ryudoi1と当メディア運営中 詳細なプロフ ぞえのプロフィール!! Twitterアカウント Twitter 技術系の雑談や、質問の行える無料サロンもやっています。 windii social

関連記事

コメント

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

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