解决 React Native TypeError: babelHelpers.typeof is not a function

React Native有的时候会出现一些比较奇葩的问题,比如今天这次遇见的,运行 react-native start 然后模拟器打开就是这样红色的错误。😂😂😂 宝宝可是什么也没有动过,突然就坏了。 错误内容就是: ``` bash TypeError: babelHelpers.typeof is not a function. (In 'babelHelpers.typeof(target)', 'babelHelpers.typeof' is undefined) ``` 大概解决方法就是: npm cache clean 然后我们需要在我们的项目添加.babelrc 如果没有的话,然后增加一个presets配置: { "presets": ["react-native-stage-0"] } 当然我们也得安装这个依赖。 npm install babel-preset-react-native-stage-0 --save 这个时候我们重新启动: ./node_modules/react-native/packager/packager.sh start --reset-cache 参考: 详情 »

查看详情

开始使用 React-VR

React-VR 是 Facebook 团队推出的使用JavaScript来开发VR应用的框架,和 React 相似,你可以通过编写组件的形式来进行程序的开发。(写过 React-Native的应该可以很快上手吧。) 快速开始 首先我们需要安装脚手架程序: npm install -g react-vr-cli 安装成功后,我们就可以开始创建项目了。 react-vr init vrexamples 如果初始化过程中,遇见了提示 yarn 依赖安装的问题,你可以进入项目目录,重新安装就好。 初始化成功后,我们进入项目,然后输入npm start , 访问: http:/localhost:8081/vr/ 就可以看到web上的内容了。如果你有VR的设备,你也可以戴上体验下。 编辑代码 这个时候我们打开编辑器, 查看index.vr.js 的源码,写过React-Native的是不是有种泪奔的感觉,的却是这样写的: 'use strict'; import React from 'react'; import { AppRegistry, asset, 详情 »

查看详情

2017年Facebook F8开发者大会值得关注的议题

美国太平洋时间4月18日上午,2017年4月18日 Facebook 将在加州举行2017的 F8 开发者大会 。F8 主要是面向技术开发者的会议,Facebook则会带给大家过去一年里他们的技术团队在人工智能,VR,视频等方向上的研究进展。 B站的直播 F8 Youtube Keynote 每年的小扎都会做 F8 的 Keynote 演讲,阐述公司的发展近况,以及最新的研究成果。大概一个半小时的时间会有一些部门的负责人上台分享,分享团队的近况,当然这是一次最好机会练习听力的机会,不要错过。 2014年的 F8 宣传片: React 以及 GraphQL 在 FacebookF的应用以及未来 (关于 React的话题) The Evolution of React and GraphQL at Facebook and Beyond React 和 GraphQL 颠覆了传统页面的开发,这个分享我们可以了解到 FB 的工程师如何提升开发效率以及应对未来的一些 App 设计。 如何实现保持用户的持续增长 详情 »

查看详情

Google IO 2017 前端值得关注的议题

2017年的 Google IO 大会还有一个月要开始了,时间定在了美国时间 5月17日。除了值得关注的 keynote 外,这次分享还有 Google 业务线上的工程师带来几天的技术分享,从人工智能,Android,云平台以及 Web 等领域技术一线工程师的议题分享。下面罗列一些个人认为值得关注的议题: Keynote 虽然是凌晨一般都是北京时间晚上1点多开始,但是真的值得期待,每年的开场都会精心设计,小花童鞋是最期待这一项的。Google的各个业务线工程师都会带来过去一年的成功给大家,比如新的Android, cloud platform , deepmind 等。这个近些年国内都会有直播的,GDC也会组织线下的活动的。贴下2013年 Google IO 的开场视频: 直接从6分钟开始看 The Future of Audio and Video on the Web Sam Dutton 用户在网上绝大多数时间都花费在了音乐和视频,而音频和视频占据70%的文件内容,而现在web不需要任何插件就能够提供给用户非常棒的音视频体验,那么接下来我们将分享如何进行优化以及他们的未来。 From AMP to PWA: 详情 »

查看详情

在 Weex 中使用 SVG

weex-svg 介绍 近几年 SVG 逐渐成为前端开发的热门技术。我们可以在业务场景中构建我们的图标,以及替代部分位图,随着动画交互的普及,SVG 也成为了大家的选择之一。 今天我们给大家带来如何在 weex 项目中通过 weex-svg 来实现 SVG 的一些图形信息的展示。 我们查阅 weex-svg 的文档,可以了解它目前支持的一些元素和属性有: 基本的图形 rect 矩形 circle 圆形 path 路径 polyline 折线 polygon 几何形 line 直线 linear-gradient 线性渐变 radial-gradient 径向渐变 通用属性 fill 颜色填充 stroke 描边的颜色 stroke-width 描边的宽度 快速开始 weex-svg 在插件市场已经发布了,我们可以通过 weex-toolkit 来添加插件。 首先我们创建一个项目: weex create svgapp 然后进入创建的项目, 详情 »

如何 Build 一个 Thera

Thera 是一款针对移动混合应用开发的编辑器,它适用于通过weex, Luaview,React Native编写的应用,支持调试,语法高亮,代码片段等常用编辑器功能,同时还可以实现真机模拟和调试。实际上它的底层参考了Atom的设计,基于 Electron ,可以通过JS 和 Html + Css来实现编辑器的基本的功能。由于 thera 是经过深度改造,和 atom相差较大,因此我们可以直接修改源码来build 一个自己的浏览器。 首先我们克隆项目: git clone https://github.com/alibaba/thera 然后进入项目,我们执行 npm install。 安装完成后,我们需要 script下面去执行 npm 包的安装,用于我们 build的依赖 cd script && npm install 接下来,我们需要手动去进行 apm 包管理器的代码下载,因为 Thera 有实现自己的 详情 »

查看详情

Atom 插件开发知识整理(持续更新)

Atom是Github推出的一款代码编辑器,抛开对于编辑器基本功能的实现,Atom的架构体系也值得大家学习,Atom是通过前端的HTML + JS + CSS借助 Electron来实现构建客户端程序的架构,同样这样的实现也有利于自己扩展更多的插件,很多开发者可以通过JS去实现插件的基本开发,这里梳理下插件开发的基本要点。 快速开始 apm 是 Atom 的一款命令行工具。我们开发插件需要用到它。我们先确保我们安装了 apm. 可以点击左上角的 Atom -> Install Shell Commands 来进行安装。完成之后我们可以输入 apm -v: apm 1.15.3 npm 3.10.5 node 4.4.5 x64 python 2.7.10 git 2.11.0 我们开发插件通过 Package Generator 命令来实现快速创建一个插件开发的基本文件。通过快捷键 输入 详情 »

查看详情

Nuclide 阅读笔记

Nuclide是 facebook 针对Atom出的一款编辑插件,你可以通过它开发,调试 React 以及 React Native的程序。这也是FB首次将自己的开发流引入到第三方编辑器中。 当然这里记录的不是这个编辑器怎么用,怎么用可以看这里.这里主要是记录对源代码的阅读和解析。 目录结构 Nuclide 的目录结构并非和标准的 atom 插件生成包的目录一致。 + lib // 存放的是整个Atom 插件功能的JS资源 + node_modules + pkg // 依赖的包,插件功能的具体实现在这个里面 + nuclide-code-hightlight 代码高亮的功能 + nuclide-console 实现控制台输出功能 + ... + resources + package.json ... 不是很重要的文件 lib 目录 熟悉 Atom插件开发的应该都知道,我们实际上所定义的菜单按钮或者command的这些都是通过在这里面的JS实现的,而我们首先需要制定项目的入口文件,也就是lib/main-entry.js。 main.js main.js 实际为 nuclide 做了配置的主要事情,我们看源码就知道,它执行流程如下: 设置默认的配置 读取 pkg 目录下的包的package. 详情 »

查看详情

通过Weex 300行代码开发一款简易的跑步App

Weex正如它的目标, 一套构建高性能、可扩展的原生应用的跨平台开发方案 Weex 给大家带来的无疑是客户端开发效率的提升,我们可以通过一套代码,实现web,android, iOS的三个平台上运行。自己最近尝试了一次借助weex的插件机制,使用Weex-Amap地图插件 可以开发 LBS 相关的应用。 首先我们先来看下运行的效果吧: iOS 版 Android 版 截图数据仅供参考 它大概具备下面的一些功能; 统计用户在运动过程中的距离累计,时间计算等。 存储用户的运动数据 使用地图定位和距离计算的API,实现距离统计。 显示地图折线,通过对定位的数据地理位置进行折线绘制 统计用户运动的数据,计算总距离和时间 点击用户的历史记录,可以查看轨迹 感觉和大家所用到的app功能相差不多了,但实际上我们借助 Weex 和 Weex-Amap 插件可以非常快速的实现这些功能,下面我们来看下具体怎么实现吧。 使用 weex-toolkit 创建项目 首先我们按照官网的教程安装weex-toolkit。如果已经安装过请忽略。 $ npm install -g weex-toolit 安装完成后,我们创建一个项目目录,比如running-app。 weex create running-app 大家可能会看到下面的提示,输入y安装即可。 详情 »

查看详情

Weex-amap:Weex高德地图插件使用指南

weex-amap 一款高德地图 Weex 插件,它具备了地图的基本使用功能,包括地图展示,添加坐标点,控制地图缩放,在地图上添加折线或者圆形等图形,同时也具备地图的一些基本计算和判断等功能。而且如同 Weex 的能力,它是三端都支持运行,这样你可以通过一套代码实现三端的地图功能。 使用效果预览(iOS版): 快速开始 使用插件,我们需要初始化一个工程项目,然后将插件添加进去。 weex create mapapp cd mapapp # 你可以自行添加ios 或者 android weex platform add ios # 添加地图插件 weex plugin add weex-amap 请确保你安装了最新的 weex-toolkit 这样你的项目里就具备了高德地图的插件功能。 先来一段基本的地图展示,编辑你的weex文件 <template> <div class="container"> <weex-amap class= 详情 »