Vue开发React Native应用详解

概述

自从2015年4月React Native 发布以来后，关于移动跨平台的话题就层出不穷，不管是大公司还是小公司都在开始使用React Native 来开发跨平台App。不过，也有公司对React Native 并不看好，如Airbnb在去年就开始宣布弃用React Native ，不管如何，React Native 的跨平台的目的是很诱惑的。

紧接着google发布了跨平台框架Flutter，对于这个颠覆式的框架，可以说受到大多数开发者和公司的青睐，因为它是google开发的，目前活跃度明显超过了React Native。

自从Flutter诞生后，React Native已经感受到了压力，因此加快了优化的进度。去年底公布了优化方案，目前正在重构js引擎，最大提升js的性能问题。毕竟React Native低层还是基于原生的系统去做的，目前来看有一定的优势，而且社区庞大，短期用户量还是有的。Flutter虽然流畅，UI层独立，但是很多插件还是要基于原生系统架构，不能完全独立。

但是，不管是React Native还是Flutter，它们都不能脱离原生系统，除非android和iOS系统被另外一个系统取代。所以，不管未来如何，对于前端同学来说，React Native还是很有诱惑力的，它让前端同学有能力开发媲美原生应用的能力。

在前端框架中，作为仅次于React 的框架，Vue在国内的趋势可以说已经超过React，更是受到广大程序员的喜爱。正是基于此，一家名叫GeekyAnts 的印度公司开发了 Vue Native，病用它来开发基于 React Native 的跨平台应用。

Vue Native

安装

安装Vue Native可以使用vue-native-cli脚手架方式，安装的命令如下：

npm install -g vue-native-cli

新建项目

安装vue-native-cli工具后，接下来就可以使用vue-native-cli的命令行来新建Vue Native应用。

vue-native init <projectName>
cd <projectName>

安装依赖包

创建项目后，还需要安装以下一些依赖包：

npm install vue-native-core vue-native-helper —save
npm install vue-native-script —save-dev

Hello Word

例如，下面是一个使用Vue编写的React Native程序，运行效果如下图：

在这里插入图片描述

和 React Native使用React一样，Vue Native使用的是Vue语法，开发者可以直接使用Vue语法来开发跨平台应用，对于熟悉Vue的开发者来说，使用Vue来开发移动应用可谓得心应手。 和React Native一样，使用vue-native-cli初始化一个新的 app时，app的入口文件为App.vue。并且，开发者可以使用很多.vue文件来组合一个新的.vue文件，在app编译时系统会将所有的vue 文件翻译成以.js 后缀的 React Native 组件，最后调用原生组件进行渲染。

指令

在 Vue 中，指令是可以说是一种特殊的属性，他们都以v-作为前缀。

v-if 和 v-else

v-if和v-else用来编写条件语句。例如：

<template>
    <view class="container">
        <view class="btn-container">
            <button title="show A" :on-press="() => handleBtnClick('A')" />
            <button title="show B" :on-press="() => handleBtnClick('B')" />
            <button title="show C" :on-press="() => handleBtnClick('C')" />
        </view>
        <view>
            <text v-if="type === 'A'">
                A
            </text>
            <text v-else-if="type === 'B'">
                B
            </text>
            <text v-else-if="type === 'C'">
                C
            </text>
            <text v-else>
                Not A/B/C
            </text>
        </view>
    </view>
</template>

运行效果如下：

在这里插入图片描述

v-for

当然，还使用v-for指令来写循环，和 JavaScript 的 map 类似。例如：

<template>
 <view class="container">
   <text
       class="text-container"
       v-for="todo in todos"
       :key="todo.text"
   >
     {{ todo.text }}
   </text>
 </view>
</template>
<script>
export default {
 data: function() {
   return {
     todos: [
       { text: "Learn JavaScript" },
       { text: "Learn Vue" },
       { text: "Build something awesome" }
     ]
   };
 }
};
</script>

运行效果如下：

在这里插入图片描述

示例

KitchenSink

KitchenSink是一个使用Vue 重写的Vue Native应用，源码地址为：https://github.com/GeekyAnts/KitchenSink-Vue-Native，可以下载源码并进行二次开发。

Todo

除了KitchenSink外，你也可以下载ToDo 应用，它是GeekyAnts 的高级软件工程师Ankit Singhania使用 Vue Native 编写的Vue Native应用，下载地址为：https://github.com/ankitsinghania94/vue-native-todo-app

其他

Vue Native 使用vue-router来实现导航逻辑，我们来看看下面的实现：

在这里插入图片描述

应用的状态，使用的是Vuex，具体可以参考Vue官网 当然，这个库目前还在开发和升级中，并且React Native本来就很坑，Vue Native不过是为Vue开发移动应用提供了可能，还不好用目前并不好说。