[[417301]]

Vue Native 是一個 JavaScript 框架，旨在使用 JavaScript 構建可以在 Android 和 iOS 上運行的跨平臺移動應用程序。通過封裝 React Native，開發人員可以使用 Vue Native 使用 Vue.js 構建移動應用程序。

正因為如此，所有可以在 React Native 中完成的事情都可以在 Vue Native 中完成，并且代碼被編譯為 React Native。通過這種方式，開發人員可以從 Vue 和 React Native 生態系統提供的內容中受益。

在這篇文章中，我們將討論 Vue Native 的特性以及如何使用 Vue Native 創建移動應用程序。

Vue Native 的特性

在決定使用 Vue.js 構建移動應用程序時，Vue Native 有許多有用的特性需要考慮。

聲明式渲染

Vue Native使用聲明式編程范式。這意味著我們只需聲明我們希望我們的組件和狀態如何渲染以獲得我們想要的結果。

雙向綁定

在我們的Vue Native應用中，我們可以在我們的組件類和其模板之間共享數據。如果我們改變了狀態中的數據，它就會自動反映在用戶界面中。

我們仍然必須訪問 v-model 進行雙向數據綁定。這意味著我們可以使用 v-model 將一個 input 元素的值綁定到我們組件的數據屬性中。

Vue.js 生態系統的豐富性

Vue 生態系統是 JavaScript 領域最大、發展最快的生態系統之一。使用 Vue Native 構建應用程序提供了更大的 Vue 生態系統的好處。

這意味著我們可以使用諸如 v-if 用于條件渲染，v-model 用于雙向數據綁定，v-for 用于列表渲染，以及Vuex用于狀態管理等功能。

編譯為 React Native

因為 Vue Native 依賴于 React Native，所以熟悉 React Native 生態系統的開發者更容易上手。

我們還可以在 Vue Native 中渲染 React Native 組件，而無需編寫一行額外的配置，以便輕松集成并提高生產力。

設置開發環境

開始使用 Vue Native 的最快和最簡單的方法是使用 Vue Native CLI[1] 引導移動應用程序。此 CLI 使用 Expo CLI[2] 或 React Native CLI[3] 生成一個簡單的單頁應用程序。

這意味著我們必須安裝任一CLI，根據我們應用程序的需要，來使用Vue Native CLI。

要開始，我們必須安裝一些依賴項。首先，運行下面的命令來全局安裝Vue Native CLI。

$ npm install --g vue-native-cli 

接下來，全局安裝 Expo CLI，盡管這可以與 React Native CLI 互換：

$  npm install --g expo-cli 

創建一個Vue Native項目

現在 Vue Native 和 Expo CLI 都已全局安裝，讓我們使用以下命令創建一個 Vue Native 項目： 

vue-native init <yourProjectName> 

通過在項目的根目錄下導航并運行這個命令，啟動一個開發服務器：

$ cd <yourProjectName> 
$ npm start 

Metro Bundler 在 React Native 中編譯 JavaScript 代碼，從 http://localhost:19002/ 運行。通過在 Web 瀏覽器中訪問 http://localhost:8080/，將出現以下頁面：

若要在物理設備上查看Vue Native應用，請掃描瀏覽器中的二維碼，并在Android或iOS的Expo Go中打開鏈接。

我們也可以通過點擊瀏覽器中顯示的鏈接，在安卓模擬器或iOS模擬器上打開應用程序，但并不是所有在Expo Go中可用的API都可以在模擬器上使用。

作為選擇，我們可以克隆Vue Native核心團隊準備的Kitchen Sink演示應用程序。

Vue Native UI組件

Vue Native提供了一些開箱即用的UI組件來構建應用界面，讓我們來看看其中最重要的一些組件。

視圖組件

view 組件就像我們普通HTML中的 div 標簽一樣工作。這個組件是在Vue Native中創建用戶界面的基本構建模塊，就像在React Native中一樣。

我們可以在一個 view 組件中擁有多個子組件，比如下面的代碼。

<template> 
  <view class="container"> 
    <text>My Awesome Vue Native App</text> 
  </view> 
</template> 

Text組件

要在我們的移動應用程序中輸出文本，我們不能使用常規的HTML標簽，如 h1 或 p。相反，我們必須使用 ... 組件。使用這個組件是非常直接的。

<template> 
  <text>Hello World</text> 
</template> 

Image組件

Image 組件渲染靜態圖像、網絡圖像和來自用戶設備的圖像。

與普通的 img 標簽中使用 src 屬性不同，這里我們在 image 組件中綁定了 source 屬性來動態加載我們的圖片。這使得webpack在構建過程中可以捆綁我們的圖片資產。

通過添加以下內容，我們可以將圖像加載到Vue Native應用中：

<template> 
    <!-- Network image --> 
  <image 
     :style="{ width: 300, height: 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', 
      }" 
   /> 
 
  <!-- Static image --> 
  <image 
     :style="{ width: 300, height: 150 }" 
     :source="require('./assets/photo.jpg')" 
  /> 
 
  <!-- Local disk image -->  
  <image 
     :style="{width: 66, height: 58}" 
     :source="{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}" 
   /> 
</template> 

TextInput組件

TextInput 組件通過用戶的鍵盤將文本輸入到應用程序中。我們可以使用 v-model 將我們狀態中的數據綁定到 TextInput 組件。這允許我們無縫獲取和設置 TextInput 的值：

<template> 
  <view class="container">  
    <text-input 
      :style="{ 
        height: 30, 
        width: 250, 
        borderColor: '#511281', 
        borderWidth: 1, 
      }" 
      v-model="text" 
    /> 
  </view> 
</template> 
 
<script> 
export default { 
  data() { 
    return { 
      text: "", 
    }; 
  }, 
}; 
</script> 

然后，上面的代碼在Vue Native應用中輸出如下屏幕：

NativeBase UI 組件

要建立一個可以投入生產的移動應用，僅僅使用內置的Vue Native組件可能是不夠的。幸運的是，Vue Native帶來了React Native和Vue.js兩個生態系統的優點，所以我們可以使用NativeBase UI組件。

NativeBase是由GeekyAnts創建的，他們是Vue Native背后的同一個團隊。這個UI組件給了我們一個真正原生的外觀和感覺，在我們的移動應用中，通過相同的JavaScript代碼庫，為Android和iOS提供了特定平臺的設計。

雙向數據綁定

使用 v-model 在我們的 Vue 組件模板和 Vue Native 中的 Vue 狀態之間共享數據是輕而易舉的。我們可以使用 v-model 指令探索雙向數據綁定，如下所示：

<template> 
  <view class="container">  
    <text-input 
      :style="{ 
        height: 30, 
        width: 250, 
        borderColor: '#511281', 
        borderWidth: 1, 
      }" 
      v-model="text" 
    /> 
  </view> 
</template> 
 
<script> 
export default { 
  data() { 
    return { 
      text: "", 
    }; 
  }, 
}; 
</script> 

通過將一個帶有數據綁定的輸入字段從我們的狀態輸出到輸入字段和一個文本組件，我們可以看到以下內容：

導航和路由

Vue Native應用中的導航和路由是通過Vue Native Router[4]庫來處理的。在底層，這個庫使用了流行的React Navigation[5]包。Vue Native Router和React Navigation都有類似的api，因此安裝也類似。

該庫沒有預裝，所以為了在我們的應用程序中開始使用導航，我們必須用以下方式安裝它。

npm i vue-native-router 

請注意，我們需要安裝以下軟件包才能使 Vue Native Router 正常工作：

• react-native-reanimated[6]
• react-native-gesture-handler[7]
• react-native-paper[8]

在項目根目錄下運行以下命令來安裝這些包：

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

Vue Native Router 提供了 StackNavigator 和 DrawerNavigator 來注冊用于導航的屏幕：

<script> 
import { 
  createAppContainer, 
  createStackNavigator, 
} from "vue-native-router"; 
 
import SettingsScreen from "./screens/SettingsScreen.vue"; 
import HomeScreen from "./screens/HomeScreen.vue"; 
 
const StackNavigator = createStackNavigator( 
  { 
    Settings: SettingsScreen, 
    Home: HomeScreen, 
  }, 
  { 
    initialRouteName: 'Home', 
  } 
); 
 
const AppNavigator = createAppContainer(StackNavigator); 
 
export default { 
  components: { AppNavigator }, 
} 
</script> 

要在屏幕之間導航，請調用 navigation 對象上的 navigate 方法，該方法作為props傳遞如下：

<script> 
export default { 
  // navigation is declared as a prop 
  props: { 
    navigation: { 
      type: Object 
    } 
  }, 
  methods: { 
    navigateToScreen() { 
      this.navigation.navigate("Profile"); 
    } 
  } 
} 
</script> 

狀態管理

對于Vue Native應用程序中的集中狀態管理模式，我們可以使用Vue的官方狀態管理庫Vuex。

集成Vuex非常簡單。首先，使用以下命令之一安裝Vuex：

npm i vuex 
//or 
yarn add vuex 

創建一個中央存儲文件，并根據應用程序的需要添加 state、getter、mutations 或 actions。為了簡單起見，在這里使用 state 對象:

// store/index.js 
 
import Vue from 'vue-native-core'; 
import Vuex from 'vuex'; 
Vue.use(Vuex); 
const store = new Vuex.Store({ 
  state: { 
    name: 'Ejiro Asiuwhu', 
  }, 
}); 
export default store; 

在我們的store中使用數據和方法與傳統的Vue應用程序有很大不同，這里是如何導入和使用我們store中的數據：

<script> 
import store from "./store"; 
export default { 
  computed: { 
    name() { 
      return store.state.name; 
    }, 
  }, 
}; 
</script> 

請注意，我們沒有像通常在 Vue 和 Vuex 應用程序設置中那樣使用 this.$store。

訪問設備 API

由于React Native豐富的生態系統，在我們的Vue Native應用中訪問本地設備的API是可能的。例如，要在我們的應用程序中訪問用戶的設備地理定位API，我們可以像這樣使用expo-location[9]。

<template> 
  <view class="container"> 
 <button 
      :on-press="getLocation" 
      title="Get Location" 
      color="#184d47" 
      accessibility-label="Get access to users' location" 
    > 
    <text>Location Details:</text> 
    <text>{{ location }}</text> 
    <text>Latitude: {{ latitude }}</text> 
    <text>Longitude: {{ longitude }}</text> 
    <text class="text-error">{{ errorMessage }}</text> 
  </view> 
</template> 
 
<script> 
import * as Location from "expo-location"; 
 
export default { 
  data() { 
    return { 
      location: "", 
      latitude: "", 
      longitude: "", 
      errorMessage: "", 
      text: "", 
      user: { 
        country: "", 
      }, 
    }; 
  }, 
  methods: { 
    async getLocation() { 
      try { 
        let { status } = await Location.requestForegroundPermissionsAsync(); 
        if (status !== "granted") { 
          this.errorMessage = "Permission to access location was denied"; 
          return; 
        } 
        let location = await Location.getCurrentPositionAsync({}); 
        this.location = location; 
        this.latitude = location.coords.latitude; 
        this.longitude = location.coords.longitude; 
        this.errorMessage = ""; 
      } catch (error) { 
        this.errorMessage = error; 
      } 
    }, 
  }, 
} 
</script> 

通過使用 Expo 包，不需要額外的配置或設置，這使得使用 Vue Native 構建移動應用程序變得輕而易舉。

總結

使用 Vue Native 構建移動應用程序為使用 JavaScript 構建跨平臺移動應用程序開辟了許多可能性。

通過訪問 Vue 和 React Native 生態系統的豐富性和優勢，開發人員可以編寫 .vue 組件并將 Expo 和 React Native 包集成到應用程序中，幾乎不需要額外的配置。

本教程中使用的完整代碼可在GitHub上找到。

本教程源碼：https://github.com/ejirocodes/Vue-Native-Demo

原文：https://blog.logrocket.com/building-mobile-apps-with-vue-native/

作者：Ejiro Asiuwhu

本文轉載自微信公眾號「前端全棧開發者」，可以通過以下二維碼關注。轉載本文請聯系前端全棧開發者公眾號。