Vue Nativeを使用したモバイルアプリケーションの構築プロセスの完全な記録

序文

Vue Native は、Android および iOS で実行できる JavaScript を使用してクロスプラットフォームのモバイル アプリケーションを構築するために設計された JavaScript フレームワークです。 React Native をラップすることで、開発者は Vue Native を使用して Vue.js を使用したモバイル アプリを構築できます。

このため、React Native で実行できることはすべて Vue Native でも実行でき、コードは React Native にコンパイルされます。これにより、開発者は Vue と React Native の両方のエコシステムが提供するメリットを享受できます。

この記事では、Vue Native の機能と、Vue Native を使用してモバイル アプリを作成する方法について説明します。

Vue Nativeの機能

Vue Native には、Vue.js を使用してモバイル アプリを構築することを決定する際に考慮すべき便利な機能が多数あります。

宣言的レンダリング

Vue Native は宣言型プログラミングパラダイムを使用します。つまり、必要な結果を得るには、コンポーネントと状態をどのようにレンダリングするかを宣言するだけで済みます。

双方向バインディング

Vue Native アプリでは、コンポーネント クラスとそのテンプレート間でデータを共有できます。状態のデータを変更すると、UI に自動的に反映されます。

双方向データバインディングのために、v-model にアクセスする必要があります。つまり、v-model を使用して、入力要素の値をコンポーネントのデータ プロパティにバインドできるということです。

Vue.js エコシステムの豊かさ

Vue エコシステムは、JavaScript 分野で最大かつ最も急速に成長しているエコシステムの 1 つです。 Vue Native を使用してアプリケーションを構築すると、より大規模な Vue エコシステムのメリットが得られます。

つまり、条件付きレンダリングには v-if、双方向データバインディングには v-model、リストレンダリングには v-for、状態管理には Vuex などの機能を使用できるということです。

React Nativeへのコンパイル

Vue Native は React Native に依存しているため、React Native エコシステムに精通している開発者にとっては使い始めるのが簡単です。

また、追加の構成を 1 行も記述せずに React Native コンポーネントを Vue Native でレンダリングできるため、統合が容易になり、生産性が向上します。

開発環境の設定

Vue Native を使い始める最も早くて簡単な方法は、Vue Native CLI を使用してモバイル アプリをブートストラップすることです。この CLI は、Expo CLI または React Native CLI を使用して、シンプルなシングルページ アプリケーションを生成します。

つまり、Vue Native CLI を使用するには、アプリケーションの必要に応じていずれかの CLI をインストールする必要があります。

開始するには、いくつかの依存関係をインストールする必要があります。まず、以下のコマンドを実行して、Vue Native CLI をグローバルにインストールします。

$ npm インストール --g vue-native-cli

次に、Expo CLI をグローバルにインストールします。これは React Native CLI と互換性があります。

$ npm インストール --g expo-cli

Vue ネイティブ プロジェクトの作成

Vue Native と Expo CLI の両方がグローバルにインストールされたので、次のコマンドを使用して Vue Native プロジェクトを作成しましょう。

vue-native init <プロジェクト名>

プロジェクトのルート ディレクトリに移動して次のコマンドを実行し、開発サーバーを起動します。

$ cd <プロジェクト名>
$ npm スタート

Metro Bundler は、http://localhost:19002/ から実行され、React Native で JavaScript コードをコンパイルします。 Webブラウザでhttp://localhost:8080/にアクセスすると、次のページが表示されます。

Vue Native アプリを物理デバイスで表示するには、ブラウザで QR コードをスキャンし、Android または iOS 上の Expo Go でリンクを開きます。

ブラウザに表示されるリンクをクリックして、Android エミュレーターまたは iOS シミュレーターでアプリを開くこともできますが、Expo Go で使用できるすべての API がシミュレーターで使用できるわけではありません。

代わりに、Vue Native コア チームが準備した Kitchen Sink デモ アプリケーションをクローンすることもできます。

Vue ネイティブ UI コンポーネント

Vue Native は、アプリケーション インターフェイスを構築するためのすぐに使える UI コンポーネントをいくつか提供します。最も重要なものをいくつか見てみましょう。

コンポーネントの表示

ビュー コンポーネントは、通常の HTML の div タグと同じように機能します。このコンポーネントは、React Native と同様に、Vue Native でユーザー インターフェイスを作成するための基本的な構成要素です。

次のコードのように、ビュー コンポーネントに複数のサブコンポーネントを含めることができます。

<テンプレート>
  <ビュークラス="コンテナ">
    <text>私の素晴らしい Vue ネイティブ アプリ</text>
  </ビュー>
</テンプレート>

テキストコンポーネント

モバイル アプリでテキストを出力するには、h1 や p などの通常の HTML タグは使用できません。代わりに、<text>...<text> コンポーネントを使用する必要があります。このコンポーネントの使用は非常に簡単です。

<テンプレート>
  <text>こんにちは世界</te​​xt>
</テンプレート>

画像コンポーネント

画像コンポーネントは、静的画像、ネットワーク画像、およびユーザーのデバイスからの画像をレンダリングします。

通常の img タグで使用される src 属性とは異なり、ここでは画像コンポーネントの source 属性をバインドして画像を動的に読み込みます。これにより、webpack はビルド プロセス中に画像アセットをバンドルできるようになります。

以下を追加することで、Vue Native アプリに画像を読み込むことができます。

<テンプレート>
    <!-- ネットワーク イメージ -->
  <画像
     :style="{ 幅: 300, 高さ: 150 }"
     :source="{
         uri:'https://images.unsplash.com/photo-1621570074981-ee6a0145c8b5?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80',
      }"
   />

  <!-- 静止画像 -->
  <画像
     :style="{ 幅: 300, 高さ: 150 }"
     :source="require('./assets/photo.jpg')"
  />

  <!-- ローカル ディスク イメージ --> 
  <画像
     :style="{幅: 66, 高さ: 58}"
     :source="{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}"
   />
</テンプレート>

テキスト入力コンポーネント

TextInput コンポーネントは、ユーザーのキーボードを通じてアプリケーションにテキストを入力します。 v-model を使用して、状態内のデータを TextInput コンポーネントにバインドできます。これにより、TextInput の値をシームレスに取得および設定できるようになります。

<テンプレート>
  <ビュークラス="コンテナ"> 
    <テキスト入力
      :style="{
        高さ: 30,
        幅: 250,
        境界線の色: '#511281',
        境界線の幅: 1,
      }"
      v-model="テキスト"
    />
  </ビュー>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      文章： ""、
    };
  },
};
</スクリプト>

上記のコードは、Vue Native アプリに次の画面を出力します。

NativeBase UI コンポーネント

本番環境に対応したモバイル アプリを構築するには、組み込みの Vue Native コンポーネントのみを使用するだけでは不十分な場合があります。幸いなことに、Vue Native は React Native と Vue.js エコシステムの両方の利点を備えているため、NativeBase UI コンポーネントを使用できます。

NativeBase は、Vue Native と同じチームである GeekyAnts によって作成されました。この UI コンポーネントにより、モバイル アプリに真にネイティブな外観と操作性が提供され、同じ JavaScript コードベースを通じて Android と iOS の両方にプラットフォーム固有のデザインが提供されます。

双方向データバインディング

v-model を使用すると、Vue コンポーネント テンプレートと Vue Native の Vue 状態間でデータを共有するのが簡単になります。次のように、v-model ディレクティブを使用して双方向データ バインディングを調べることができます。

<テンプレート>
  <ビュークラス="コンテナ"> 
    <テキスト入力
      :style="{
        高さ: 30,
        幅: 250,
        境界線の色: '#511281',
        境界線の幅: 1,
      }"
      v-model="テキスト"
    />
  </ビュー>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      文章： ""、
    };
  },
};
</スクリプト>

状態から入力フィールドとテキスト コンポーネントへのデータ バインディングを使用して入力フィールドを出力すると、次のようになります。

ナビゲーションとルーティング

Vue Native アプリケーションでのナビゲーションとルーティングは、Vue Native Router ライブラリによって処理されます。このライブラリは、内部的には人気の React Navigation パッケージを使用しています。 Vue Native Router と React Navigation はどちらも同様の API を持っているため、インストールも同様です。

ライブラリはプリインストールされていないため、アプリケーションでナビゲーションを使用するには、次の方法でインストールする必要があります。

npm i vue-native-router

Vue Native Router が正しく動作するには、次のパッケージをインストールする必要があることに注意してください。

• 反応ネイティブ復活
• 反応ネイティブジェスチャーハンドラー
• 反応ネイティブペーパー

これらのパッケージをインストールするには、プロジェクトのルート ディレクトリで次のコマンドを実行します。

npm i react-native-reanimated react-native-gesture-handler react-native-paper

Vue Native Router は、ナビゲーション用の画面を登録するための StackNavigator と DrawerNavigator を提供します。

<スクリプト>
輸入 {
  AppContainer の作成、
  スタックナビゲーターの作成、
} から "vue-native-router" へ;

「./screens/SettingsScreen.vue」から SettingsScreen をインポートします。
「./screens/HomeScreen.vue」からHomeScreenをインポートします。

定数StackNavigator = createStackNavigator(
  {
    設定: 設定画面、
    ホーム: ホーム画面、
  },
  {
    初期ルート名: 'ホーム',
  }
);

AppNavigator を StackNavigator に追加します。

エクスポートデフォルト{
  コンポーネント: { AppNavigator },
}
</スクリプト>

画面間を移動するには、次のようにプロパティとして渡されるナビゲーション オブジェクトの navigation メソッドを呼び出します。

<スクリプト>
エクスポートデフォルト{
  // ナビゲーションはプロパティとして宣言されます
  小道具: {
    ナビゲーション:
      タイプ: オブジェクト
    }
  },
  メソッド: {
    画面にナビゲートする() {
      this.navigation.navigate("プロフィール");
    }
  }
}
</スクリプト>

状態管理

Vue Native アプリケーションの集中型状態管理モードでは、Vue の公式状態管理ライブラリ Vuex を使用できます。

Vuex の統合は非常に簡単です。まず、次のいずれかのコマンドを使用して Vuex をインストールします。

npm と vuex
//または
糸を追加するvuex

中央ストレージ ファイルを作成し、アプリケーションの必要に応じて状態、ゲッター、ミューテーション、またはアクションを追加します。簡潔にするために、ここでは状態オブジェクトを使用します。

// ストア/index.js

'vue-native-core' から Vue をインポートします。
'vuex' から Vuex をインポートします。
Vue.js で Vuex をビルドします。
定数ストア = 新しい Vuex.Store({
  州： {
    名前:「エジロ・アシウフ」
  },
});
デフォルトストアをエクスポートします。

ストアでのデータとメソッドの使用は、従来の Vue アプリケーションとは大きく異なります。ストアでデータをインポートして使用する方法は次のとおりです。

<スクリプト>
「./store」からストアをインポートします。
エクスポートデフォルト{
  計算: {
    名前（） {
      ストアの状態名を返します。
    },
  },
};
</スクリプト>

Vue および Vuex アプリケーションのセットアップで通常使用する this.$store を使用していないことに注意してください。

デバイスAPIへのアクセス

React Native の豊富なエコシステムのおかげで、Vue Native アプリでネイティブ デバイス API にアクセスすることが可能になりました。たとえば、アプリでユーザーのデバイスの位置情報 API にアクセスするには、次のように expo-location を使用できます。

<テンプレート>
  <ビュークラス="コンテナ">
 <ボタン
      :on-press="位置情報を取得"
      title="位置情報を取得"
      カラー=”#184d47”
      accessibility-label="ユーザーの位置情報にアクセスする"
    >
    <text>場所の詳細:</text>
    <text>{{ 場所 }}</text>
    <text>緯度: {{ latitude }}</text>
    <text>経度: {{ longitude }}</text>
    <text class="text-error">{{ エラーメッセージ }}</text>
  </ビュー>
</テンプレート>

<スクリプト>
"expo-location" から Location として * をインポートします。

エクスポートデフォルト{
  データ（） {
    戻る {
      位置： ""、
      緯度: "",
      経度: "",
      エラーメッセージ: "",
      文章： ""、
      ユーザー: {
        国： ""、
      },
    };
  },
  メソッド: {
    非同期getLocation() {
      試す {
        { ステータス } を Location.requestForegroundPermissionsAsync() を待機します。
        if (ステータス !== "許可") {
          this.errorMessage = "場所へのアクセス許可が拒否されました";
          戻る;
        }
        location = Location.getCurrentPositionAsync({}); を待機します。
        this.location = 場所;
        this.latitude = location.coords.latitude;
        this.longitude = location.coords.longitude;
        this.errorMessage = "";
      } キャッチ（エラー）{
        this.errorMessage = エラー;
      }
    },
  },
}
</スクリプト>

Expo パッケージを使用すると、追加の構成やセットアップは不要になり、Vue Native を使用したモバイル アプリの構築が簡単になります。

要約する

Vue Native を使用してモバイル アプリを構築すると、JavaScript を使用してクロスプラットフォーム モバイル アプリを構築するための多くの可能性が開かれます。

Vue および React Native エコシステムの豊かさと強みを活用することで、開発者は .vue コンポーネントを作成し、それを Expo および React Native パッケージにバンドルすることができます。

追加の構成をほとんどまたはまったく必要とせずにアプリケーションに統合します。

このチュートリアルで使用されている完全なコードは、GitHub で入手できます。

このチュートリアルのソースコード: github.com/ejirocodes/…

blog.logrocket.com より翻訳、著者: Ejiro Asiuwhu

これで、Vue Native を使用してモバイル アプリケーションを構築する方法についての記事は終了です。Vue Native を使用してモバイル アプリケーションを構築する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。