日々ろぐ

人に優しく٩( 'ω' )و

【雑メモ】vue-nativeを使うときにはreact-nativeがいるよってことで

WEB 駄文 vue JavaScript

タイトルの通り。

最近vueをごにょごにょしている中で、ReactNativeならぬVueNativeを見つけたので試してみた。

github.com

導入

そろそろyarnに乗り換えるかなと考えていつつ、とりあえずnpmで入れる

npm install -g vue-native-cli
プロジェクトの作成

vue-native-todoという名前でプロジェクトを作成

vue-native init vue-native-todo
エラー

今回はvue-native initのタイミングでエラーがでました。

Error In Getting Crna Package Version { Error: Command failed: create-react-native-app --version 2>/dev/null
    at checkExecSyncError (child_process.js:603:11)
    at execSync (child_process.js:640:13)
    at Object.getCrnaVersionIfAvailable (/Users/massyuu/.nodebrew/node/v10.4.0/lib/node_modules/vue-native-cli/src/utils/validation.js:62:9)
    at Command.<anonymous> (/Users/massyuu/.nodebrew/node/v10.4.0/lib/node_modules/vue-native-cli/src/index.js:31:63)
    at Command.listener (/Users/massyuu/.nodebrew/node/v10.4.0/lib/node_modules/vue-native-cli/node_modules/commander/index.js:315:8)
    at Command.emit (events.js:182:13)
    at Command.parseArgs (/Users/massyuu/.nodebrew/node/v10.4.0/lib/node_modules/vue-native-cli/node_modules/commander/index.js:651:12)
    at Command.parse (/Users/massyuu/.nodebrew/node/v10.4.0/lib/node_modules/vue-native-cli/node_modules/commander/index.js:474:21)
    at Object.<anonymous> (/Users/massyuu/.nodebrew/node/v10.4.0/lib/node_modules/vue-native-cli/src/index.js:63:9)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
  status: 127,
  signal: null,
  output: [ null, <Buffer >, <Buffer > ],
  pid: 40757,
  stdout: <Buffer >,
  stderr: <Buffer > }
Please globally install create-react-native-app dependency

「create-react-native-appをグローバルインストールしてね」とのこと。

というわけでcreate-react-native-appを追加。

npm install -g create-react-native-app
改めてプロジェクトの作成

改めて先のコマンドを実行。

テンプレートの選択肢がでてくるので、今回はブランクで作成。

Installed Crna Version create-react-native-app version: 2.0.2
Creating Vue-Native vue-native-todo App
⠋ Creating Crna vue-native-todo project
? Choose a template: (Use arrow keys)
❯ blank
  The Blank project template includes the minimum dependencies to run and an
  empty root component.
  tabs
  The Tab Navigation project template includes several example screens.

↓

? Choose a template: blank

[15:12:54] Extracting project files...
[15:13:18] Customizing project...

Your project is ready at /Users/massyuu/dev/github/vue-native-todo
To get started, you can type:

  cd vue-native-todo
  expo start
✔ Create Crna vue-native-todo project
⠋ Installing Vue Native Dependency Packages
✔ Installed Vue Native Dependency Packages

✔ Installed Vue Native Dev-Dependency Packages
Completed Installing Vue Native vue-native-todo App
アプリの起動

さて、作成したプロジェクトフォルダに移動してアプリを起動します。

cd vue-native-todo/
npm start

とすると、またしてもエラー。

[15:16:48] Starting project at /Users/massyuu/dev/github/vue-native-todo
[15:16:53] Error: React native is not installed. Please run `npm install` in your project directory.
[15:16:53] Couldn't start project. Please fix the errors and restart the project.

React nativeは必須なのですね。

コメント通りにnpm installして再度実行します。

npm i
npm start

とすると、アプリが起動してQRコードが表示されます。

[15:20:55] Starting project at /Users/massyuu/dev/github/vue-native-todo
[15:21:03] Starting Metro Bundler on port 19001.
[15:21:03] Metro Bundler ready.
[15:21:04] Expo DevTools is running at http://localhost:19002
[15:21:04] Opening DevTools in the browser... (press shift-d to disable)

  exp://192.168.11.6:19000

ここにQRコードがでてくる

  To run the app with live reloading, choose one of:
  • Scan the QR code above with the Expo app (Android) or the Camera app (iOS).
  • Press a for Android emulator, or i for iOS simulator.
  • Press e to send a link to your phone with email/SMS.
  • Press s to sign in and enable more options.

Press ? to show a list of all available commands.
Logs for your project will appear below. Press Ctrl+C to exit.

出てきたQRコードは実機で確認できる感じですかね。（Expoを使って確認する）

あとは、aとかiとかでシミュレータを起動しますよ、という感じ。

とりあえず今日は以上で。