首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

50. 精读《快速上手构建ARKit应用》

概要 本次精读我们带来是一篇《快速上手构建ARKit应用》,原文链接如上。原文标题更加直接,直译的话是“如何在5分钟里利用react native搭建出你自己ARKit应用”。...硬件上,只要有一台iPhone 6S以上手机;软件上,只要准备好最新版本XCode和日常开发要用Node环境了就好。按照react-native-arkit里面的README就可以跑起来了。...相比于用原生Swift来开发React Native 开发方式对于前端而言明显是更加容易上手了。对于尝试新东西,这也未尝不可。...我们可以看到首先识别出了地面,红圈随地面而动;再移向桌面时,很快又识别出了桌面,重新生成了一个停留在桌面上红圈。...而iPhone 6S就能跑特性又让我们觉得AR其实并没有那么遥远。在此基础之上React Native封装react-native-arkit,让我们通过JS就拥有操作ARKit能力。

1K10

SpriteKit简介-创建您第一个iPhone平台游戏

SpriteKit是一个功能强大基于2D精灵框架,适用于Apple游戏开发。SpriteKit使用SKView这是一个场景,它是你在屏幕上看到视觉效果。...接下来,我们需要选择保存项目的位置,在我们示例中,我们将其保存在桌面上,单击“ 创建”。恭喜!你创造了你第一个游戏。 运行模拟器 让我们运行模拟器以确保我们项目正常运行。...最后,让我们给我们场景提供iPhone X宽度和高度,宽度为812,高度为375,并将模拟器上设备更改为iPhone X....让我们运行模拟器,看看我们场景是怎样。如果您模拟器中iPhone处于纵向模式,您可能无法看到整个场景。您需要按Command +向右箭头将iPhone方向更改为横向模式。...您可能已经注意到,您已经学到了很多东西,比如如何在Xcode中创建第一个项目,导入资源,设置场景,将一些物理属性应用于节点以及了解Z位置。

3.4K30
您找到你想要的搜索结果了吗?
是的
没有找到

react native入门实战(一)

: 如何在mac IOS下进行react native环境配置 写一个简单例子,分析react native布局与web布局不同点 如何在Xcode上进行编译以及在IOS真机上运行 首屏加载一些简单优化方法...Mac系统包管理器,用于安装NodeJS和一些其他必需工具软件。...安装此工具可以提高开发性能 brew install watchman React Native目前需要Xcode 7.0 或更高版本,可以通过App Store或是到Apple开发者官网上下载... ); } react-native布局 React-Native布局方式与web布局有一些不同,主要不同点可以总结为以下几点: React-Native宽度不支持百分比,...实现react native懒加载我们首先需要研究如何捕获图片出现在模拟可视区域,原生ios可以直接根据已有的属性判断图像出现在模拟可视区域。

6.9K70

react native入门实战(一)

: 如何在mac IOS下进行react native环境配置 写一个简单例子,分析react native布局与web布局不同点 如何在Xcode上进行编译以及在IOS真机上运行 首屏加载一些简单优化方法...Mac系统包管理器,用于安装NodeJS和一些其他必需工具软件。...安装此工具可以提高开发性能 brew install watchman React Native目前需要Xcode 7.0 或更高版本,可以通过App Store或是到Apple开发者官网上下载... ); } react-native布局 React-Native布局方式与web布局有一些不同,主要不同点可以总结为以下几点: React-Native宽度不支持百分比,...实现react native懒加载我们首先需要研究如何捕获图片出现在模拟可视区域,原生ios可以直接根据已有的属性判断图像出现在模拟可视区域。

6.5K20

react native 入门实战(一)

作者:朱灵子 本文举一个简单例子介绍如何进行react native实战开发,主要从以下几个方面来进行介绍: 如何在mac IOS下进行react native环境配置 写一个简单例子,分析react...native布局与web布局不同点 如何在Xcode上进行编译以及在IOS真机上运行 首屏加载一些简单优化方法 react native入门实战初体验,希望能给大家一些小帮助哦!...react-native MAC IOS环境配置 在mac环境下可行react native简易安装步骤如下: 安装Homebrew Mac系统包管理器,用于安装NodeJS和一些其他必需工具软件...实现react native懒加载与Web懒加载实现方式有些许不同。在react native中,我们使用measureLayout来判断窗体具体位置。...实现react native懒加载我们首先需要研究如何捕获图片出现在模拟可视区域,原生ios可以直接根据已有的属性判断图像出现在模拟可视区域。

8K00

React Native介绍及开发环境(Mac)搭建

3-5年经验前端,能写混合开发web前端相当难找。招聘甚至不敢要求前端一定要会,多数时候需要在react基础上,入职以后再上手——是的,岗位要求需要懂更多react,而不是vue。...RN来了 2015年,Facebook在React.js Conf 大会上推出了一个用于开发Android和iOS App框架,主要编程语言是JavaScript。...因此RN如果要做全套,起码需要一台MBP+一台iphone+一台安卓机。 此外ios开发者账号是要钱(每年800+)。所以本系列文章都会以安卓开发为主。 准备 假如安装node10以上版本。...React Native 命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。...ios开发环境 首先你得安装xcode。 xcode(6.1G):它是开发iphone,ipad,iwatch,MacOSIDE。 React Native 目前需要Xcode 9.4 或更高版本。

2.9K20

从工程化角度讨论如何快速构建可靠React组件

例如像这篇《重新设计 React 组件库》,里面涉及一个组件设计各方面,粒度控制、接口设计、数据处理等等(不排除后续也写一篇介绍组件设计理念哈)。 本文关键词是三个,工程化、快速和可靠。...和 jsdom 能够模拟浏览器环境,结合 airbnb 写 react 测试库 enzyme, 基本能满足大部份 React 测试需求。...但这里举例子, react-list-scroll 组件,一个 React 滚动列表组件,碰巧遇到一种比较难模拟情况,就是对 scroll 事件模拟。这里想展开说一下。...对于 React scroll 事件而言,必须要绑定在某个元素里才能进行模拟,不巧,对于安卓手机来说,大部份 scroll 事件都是绑定在 window 对象下。...安卓测完了,那iPhone呢?iPhone scroll 事件是绑定在具体某个元素里,但我这里又不是通过 React onScroll 来绑定。

1.9K60

「大众点评点餐」小程序开发经验 02:视图

文 | 何延希 何延希,美团点评工程师,4 年 web 开发经验,现在是美团点评点餐团队一员。...WXML WXML(WeiXin Markup Language)与 HTML 对应,用于描述页面的结构,可以类比 React JSX。...小程序模板中,只能单向使用传入数据,不像 React 可以利用 props 让父子组件进行传值。 我们以单个菜品组件为例,看看如何在小程序中使用模板: 6....对于常用选择器,小程序目前支持以下这些: 目前不支持选择器有: 此外,还有几个需要注意地方: 之前提到,页面的顶层是节点,所以想要修改作用于整个页面的样式、顶层节点样式,请使用 page 选择器...我们建议设计师在开发微信小程序时,可以用 iPhone 6 作为视觉稿标准。 另外,由于数值较小时渲染时会存在四舍五入情况,在较小屏幕上差距会很大,所以要求精确而较小视图内容需避免使用此单位。

3K30

大前端未来是否可期?了解下历史先!

次年1994年,网景公司打造了一款名为Navigator 0.9版浏览器,该产品在当时也算是轰动一时,即使该版本浏览器仅仅可以用于浏览而已,并不具备与访问者沟通互动能力。...它们之间通讯,只需要后端暴露 RESTful 接口,前端通过 Ajax,以 HTTP 协议与后端通信即可。 此时,手机端发展也是不可小觑: 2007 年第一代 iPhone 发布。...相比原生应用,Web APP有太多好处:无须开发两套系统版本、无须安装、无须手动升级、无须审核……我认为最大好处以及驱动软件形态转向主要原因在于降低成本。...记得13年时候韩寒说做一个APP大概需要五十万,今天网上比较靠谱分析评估半年时间从零做出一个稍微像样APP至少100万,而开发Web App花钱一定少得多。...目前Hybrid、nw.js、Electron、react native、weex等都可以看做Web App在性能方面向Native靠近尝试。更何况半路又杀出个微信小程序。 所以,前端未来可期……

68440

「译」为 JavaScript 开发者准备 Flutter 指南

如果你了解我,那么我知道你在想什么… 图片 我是一名有着超过两年半经验 ReactReact Native 开发者。...(即生命周期方法和 setState) 缺点 你需要学习 Dart (这很简单,相信我) 仍在测试中(目前已经发布正式版) 只针对 iOS 和 Android (目前也可用于 Web)...如果你同时打开了 iOS 和 Android 模拟器,你可以通过模拟器来运行这个应用程序: flutter run -d android / flutter run -d iPhone 也可以同时运行...总结 作为一个跨平台应用程序开发开发者,我会一直关注 React Native 竞争对手。这对于那些可能因某种原因想要不同客户来说 Flutter 是一个可行选择。...我叫 Nader Dabit,是一名 AWS Mobile 开发者,开发了 AppSync、Amplify 等应用,同时也是 React Native Training 创始人。

1.3K30

网易严选 App 感受 Weex 开发

自打出生那一天起,WEEX就免不了被拿来同React Native“一决高下”命运。...(如果你尚不了解React Native,并想简单入门,可以阅读【整理】ReactNative快速入门笔记) 网易严选App感受Weex开发 什么都不说,先给你感受下weex效果。...1、今天在技术社区有大量 web 开发者,Weex 可以赋能更多 web 开发者构建高性能和高体验移动应用。...但是,身为一个web前端开发者,如果你不懂原生语音的话,介绍这些并不能起到很好引导作用,因为web前端开发者都有一统前端界野心(Web+Android+IOS),“寄人篱下”只能是暂时。...这很像移动设备逻辑像,比如iPhone 6物理像素宽为750,逻辑像素 Type iPhone 3G iPhone 4 iPhone 6 iPhone 6Plus 物理像素 320x480 640x960

2.5K90

21个让React 开发更高效更有趣工具

Guppy Guppy 是React一个友好且免费应用程序管理器和任务运行器,它在桌面上运行且跨平台,你可以放心用。...它为开发人员经常面临许多典型任务(创建新项目、执行任务和管理依赖项)提供了友好图形用户界面。...React Cosmos React Cosmos是一个用于创建可重用React组件开发工具。 它扫描项目中组件,并使你能够: 通过 props,context和state任意组合来渲染组件。...模拟每个外部依赖项(API响应、localStorage等)。 查看应用程序状态在与运行实例交互时实时演变。 13....他们还支持使用常见静态站点生成器(Gatsby或Next.js)创建项目来启动React Web项目。 14.

2.4K30

写给前端工程师看,移动应用选型指南

想来在这一个混合应用项目上,我已经差不多做了一年了。加之,在上一个项目里,我做是一个移动 Web 应用,从 Backbone 到设计基于 React 原型,也积累了一定移动开发经验。...于是,人们就想: 让Web开发人员可以利用他们所有的HTML、CSS和JavaScript知识,而且仍旧可以同iPhone重要本地应用程序(摄像头和通讯录)交互呢?...当我们手上已经有一套 UI 组件, Ionic,及单页面应用框架时,要开发起这样应用更是手到擒来。...这个时候,我们需要一个更快 WebView, CrossWalk,又或者是使用诸如 React Native 或者 NativeScript 这样方案。...因此,我们只需要寻找一个基本 boilerplate 模板,就可以上手开发了。当然,你最好还应该有一个真机,模拟机虽然比较方便,但是性能上仍然还是有一些小足

2.1K60

服务端来自火星,客户端来自金星,RSC 开发新思路

在基于 React Web UI 开发中,React 服务端组件(RSC) 是一种新编程模式。与传统 React “客户端”组件不同,它们只在服务器上进行渲染。...这为性能和安全方面带来了一些好处,但与当下各种 React 工具和库相比,其用法有很大差异。 其中受影响最大领域之一就是基于组件驱动开发和测试。...它是一个用于生成纯 HTML/CSS/JS 静态构建,没有任何 Node 影子!...模块模拟:有一个叫做 storybook-addon-module-mock 社区插件,它提供了和 jest.mock(仅适用于 Webpack 项目)类似的模拟功能。...utm_campaign) 从新 React 文档看未来 Web 开发趋势 (https://www.infoq.cn/article/Tv3SyqoivXMWUoj8qSMT) 如何快速构建 React

16510

15个你必须知道Facebook开源项目

可以迅速创建原型,运行在你iPhone或iPad上并进行迭代,将可用代码片段输出给工程师。 Stetho Stetho是一个全新安卓平台调试工具。...Infer目标是空指针异常、资源漏洞、内存溢出之类致命缺陷。 Web开发 React Js React Js是个用于构建用户界面的JavaScript库,高效且灵活。...Flux Flux是Facebook用户创建客户端web应用应用架构。利用一个单向数据流,Flux补充了React组合视图组件。...设计目的是为了在整个公司为工程师提供一套标准开发者经验——无论他们从事纯iOS应用,ReactReact Native代码,或者在Hack运行我们HHVM网络服务。...后端开发 Presto Presto是开源分布式SQL查询引擎,适用于运行交互式解析查询,数据量支持从GB到PB。

1.8K20

移动Web 开发一些前端知识收集汇总

开发DeveMobile 与EaseMobile 主题 时候积累了一些移动Web 开发前端知识,本着记录总结目的,特写这篇文章备忘一下。...要说移动Web 开发与传统PC 端开发,感觉也没什么不同,但得益于苹果对于智能机推动,CSS3+HTML5几乎可以毫无顾忌使用,然后浏览器端考虑webkit内核就差不多了。..." content="black" /> 第一个meta标签是iphone设备中safari...添加初始化图片 用户点击你桌面上webapp图标后,打开会加载浏览器(实际上是webkit webview模块),然后下载、解析、渲染,在这个过程中,ios允许我们使用一个初始化图片来替代白色浏览器屏幕...闪屏问题 使用css3动画时尽量利用3D加速,从而使得动画变得流畅(可参考《移动Web 开发 Off Canvas 导航》这篇文章)。

3.8K50

21个让React 开发更高效更有趣工具

但是,其中一个缺点是它目前仅适用于类组件,因此尚不支持 Hook。 6. Guppy Guppy 是React一个友好且免费应用程序管理器和任务运行器,它在桌面上运行且跨平台,你可以放心用。...它为开发人员经常面临许多典型任务(创建新项目、执行任务和管理依赖项)提供了友好图形用户界面。 Guppy 启动后样子 ?...React Cosmos React Cosmos是一个用于创建可重用React组件开发工具。 它扫描项目中组件,并使你能够: 通过 props,context和state任意组合来渲染组件。...模拟每个外部依赖项(API响应、localStorage等)。 查看应用程序状态在与运行实例交互时实时演变。 13....他们还支持使用常见静态站点生成器(Gatsby或Next.js)创建项目来启动React Web项目。 ? 14.

97220

hippy-react 三端同构

1.2 @hippy/react @hippy/react 是基于 Facebook React 官方自定义渲染器 react-reconciler 重新开发 React 到终端渲染层,可以使用...*注*: 由于 Hippy 页面挂在一个节点上,所以 Portals 暂时无法支) 1.2 @hippy/react-web 该项目仍在开发中,有不完善地方 考虑到客户端页面在不少场景下,需要提供web...Hippy 提供了 @hippy/react-web 框架来支持 @hippy/react 项目通过转译,生成可以运行在浏览器中版本,从框架上支持三端同构,减少开发成本 @hippy/react-web...@hippy/react-web 通过 Component 实现 @hippy/react 组件功能,同时使用 Adapters 实现原生组件特性 使用 Hippy 开发项目,只组要简单进行打包配置...// web 开发配置 ├── hippy-webpack.web.js // web 打包配置 ├── run-ios.js // 拉起IPHONE模拟器 ├── template.html

1.6K00

AirPods 监控头部运动,同步大象机器人myCobot 280协作机械臂

虽然具体细节可能依赖于实现方式和所用平台( iOS),它主要演示如何通过连接到设备耳机(尤其是那些带有内置传感器智能耳机)来捕获头部运动数据。...这也是本次项目较为核心一个技术。web服务器:服务器类型有很多种,它为其他应用程序或设备提供数据,服务或应用程序。服务器执行某些任务,处理数据请求,托管网站,存储信息,运行企业应用程序。等等。...express-node.js:Express 是一个快速、开放、最小化 Web 应用程序框架,用于 Node.js。它被设计用来构建 Web 应用程序和 API。...它允许开发者以非常快速和简便方式设置中间件来响应 HTTP 请求,使得开发 Web 应用程序变得更加简单快捷。...使用pymycobot,开发者可以编写代码来控制机械臂运动、调整其姿态、执行预设动作序列等,使其在教育、研究、自动化等多种场景中具有广泛应用可能性。

13110
领券