[[417301]]

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

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

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

Vue Native 的特性

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

聲明式渲染

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

雙向綁定

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

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

Vue.js 生態(tài)系統(tǒng)的豐富性

Vue 生態(tài)系統(tǒng)是 JavaScript 領域最大、發(fā)展最快的生態(tài)系統(tǒng)之一。使用 Vue Native 構建應用程序提供了更大的 Vue 生態(tài)系統(tǒng)的好處。

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

編譯為 React Native

因為 Vue Native 依賴于 React Native，所以熟悉 React Native 生態(tài)系統(tǒng)的開發(fā)者更容易上手。

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

設置開發(fā)環(huán)境

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

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

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

$ npm install --g vue-native-cli 

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

$  npm install --g expo-cli 

創(chuàng)建一個Vue Native項目

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

vue-native init <yourProjectName> 

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

$ cd <yourProjectName> 
$ npm start 

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

若要在物理設備上查看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中創(chuàng)建用戶界面的基本構建模塊，就像在React Native中一樣。

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

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

Text組件

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

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

Image組件

Image 組件渲染靜態(tài)圖像、網(wǎng)絡圖像和來自用戶設備的圖像。

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

通過添加以下內容，我們可以將圖像加載到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 將我們狀態(tài)中的數(shù)據(jù)綁定到 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 組件

要建立一個可以投入生產(chǎn)的移動應用，僅僅使用內置的Vue Native組件可能是不夠的。幸運的是，Vue Native帶來了React Native和Vue.js兩個生態(tài)系統(tǒng)的優(yōu)點，所以我們可以使用NativeBase UI組件。

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

雙向數(shù)據(jù)綁定

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

<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> 

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

導航和路由

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> 

狀態(tài)管理

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

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

npm i vuex 
//or 
yarn add vuex 

創(chuàng)建一個中央存儲文件，并根據(jù)應用程序的需要添加 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中使用數(shù)據(jù)和方法與傳統(tǒng)的Vue應用程序有很大不同，這里是如何導入和使用我們store中的數(shù)據(jù)：

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

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

訪問設備 API

由于React Native豐富的生態(tài)系統(tǒng)，在我們的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 生態(tài)系統(tǒng)的豐富性和優(yōu)勢，開發(fā)人員可以編寫 .vue 組件并將 Expo 和 React Native 包集成到應用程序中，幾乎不需要額外的配置。

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

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

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

作者：Ejiro Asiuwhu

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