|||
译者按: 一家叫 GeekyAnts 的印度公司开发了 Vue Native,基于 React Native 实现。
译者: Fundebug
为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。
尽管整个 JavaScript 社区对 Vue 的情感是比较微妙的(不懂为啥),但也不能阻止我尝试用 Vue Native 来开发移动 App。
这是一个很简单的例子,仅仅将“Hello World”在页面上展示出来。
作为一个前端开发,我很喜欢 HTML 的简洁。直接编写代码,辅以 CSS 来定制样式。Vue 的.vue 文件提供了类似的体验。
Vue 有丰富的功能:支持模板化、样式定义、基于 Vuex 的状态管理和路由。这使得它不失为一个完美的选择。
使用 Vue Native,我们在开发中也有着类似的体验。
在网上简单的搜索,就可以发现 SmallComfort 开发的react-vue项目。react-vue
将 Vue 文件翻译到 React 和 React Native 组件。感谢 react-vue 的作者解决了很多问题。 Vue Native 是同样的。
Vue Native 依赖 React Native。当你使用vue-native-cli
初始化一个新的 app,入口文件是App.vue
。
就像.js
文件一样,你可以用很多.vue
文件来组合一个.vue
文件。实际上,所有的.vue 文件到翻译到以.js 后缀的 React Native 组件。如果想了解更多,请参考此处。
Vue Native 同样支持使用v-model
来做数据双向绑定。
<template> |
你可以使用v-for
指令来写循环,和 JavaScript 的 map 类似。
<template> |
我们使用 Vue Native 重写了 KitchenSink 应用,你可以去这里下载源码:GeekyAnts/KitchenSink-Vue-Native。
我们 GeekyAnts 的高级软件工程师Ankit Singhania使用 Vue Native 写了一个简单的ToDo 应用。
为了使用 Vue Native,你首先需要安装 React Native。根据这里的步骤来安装。
下一步,使用 npm 安装 Vue Native CLI。
npm install -g vue-native-cli |
之后,你就可以初始化一个 Vue-Native 项目了:
vue-native init <projectName> |
你可以直接使用npm run
来在 IOS/Andriod 模拟器上运行这个 Vue Native 应用了。
在 Vue 中,指令是可以说是一种特殊的属性,他们都以v-
作为前缀。下面是几个常用的指令。
v-if
和v-else
用来编写条件语句。
<template> |
执行结果如下:
v-for
类似于 JavaScript 的 map。
<template> |
执行结果如下:
v-model
指令用来创建一个双向绑定的元素,可以基于一个 input 元素或则一个组件。它内部是将 value 和 onChangeText 绑定到 React Native 的 TextInput。
<template> |
上面的代码对textContent
做了双向绑定,如果在 text-input 输入内容,它会被存储到textContent
中,然后会直接显示到text-input
的下方。
执行结果如下:
Vue Native 使用vue-router
来实现导航逻辑。我们来看看下面的实现:
你可以使用 Vuex 来管理状态,详情查看:Vuex。
有时候对于一个组件,你需要创建一个返回 JSX 代码的函数;比如在 FlatList 中的 renderItem 函数就必须返回 JSX。
报错是在 React Native 层面的,并没有映射到 Vue Native 代码。我们正在优化这个问题。
我们已经使用 Vue Native 将整个 KitchenSink 重写,你可以在生产环境使用它。不过你要记得它有局限性。
Vue-Native 是完全开源的,可以在 Github 找到源代码:vue-native-core。
Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了10亿+错误事件,付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎大家免费试用!
转载时请注明作者 Fundebug以及本文地址:
https://blog.fundebug.com/2018/07/23/vue-native/
Archiver|手机版|科学网 ( 京ICP备07017567号-12 )
GMT+8, 2024-8-20 10:10
Powered by ScienceNet.cn
Copyright © 2007- 中国科学报社