文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

从react-sketch.app说起

airbnb又发布了款开源工具，这次是一个利用react来生成sketch设计稿的工具。 基本原理 是利用sketch开放的api接口，把react写的组件按照接口逻辑输入sketch。...下面来谈谈react-sketch.app能做啥1、官方示例ProfileCards 可以建立组件库，这样以后设计师需要使用，直接调用，迭代也方便了，修改一处，其他套用的组件都一并修改了，大大减少了工作量...3、官方示例VenueSearch on Web + Sketch w/ react-primitives, Foursquare & Google Maps 调取api,以真实数据来做设计； 可以和任何前端开发一样引入真实的数据和...还有一点要单独说明的就是： 实时预览 这对于程序员的意义更大，因为react写完的前端代码，可以实时在sketch里预览啦，很直观。 其实，实时预览不是个新鲜事。...对了，deco IDE还是开源的，可以研究下他的实现代码了，用的是electron，调用nodejs的系统级api，然后再结合react native，实现的编辑器。 最关键是开源！

1.9K50
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    React Native 用JavaScript开发移动应用 - 思维导图

    --------- React Native是当前移动端开发中的优秀解决方案。...《React Native：用JavaScript开发移动应用》围绕着如何将一个完整App提交到App Store，讲解了使用React Native开发iOS应用所涉及的方方面面。...首先介绍了Flexbox布局，教大家从零开始搭建一个初始应用，以此阐明React Native的基础运行机理；然后介绍了Flux的设计思想，怎么理解和使用Promise、Fetch等新API，以及数据库...SQLite存储方面的知识，以便让你对一个完整的App形成感性认识；最后讲解了怎样测试React Native组件，并将完整的App发布到App Store中。 　　...如果你对开发Web端的原生移动应用感兴趣，《React Native：用JavaScript开发移动应用》就是一本不容错过的以实例代码为引导的入门书籍。 回复"20161217" 查看开篇那句英语翻译

    1.4K40

    如何在 React Native 实现类微信小程序平台：WebView 调用原生组件

    在《我们是如何将 Cordova 应用嵌入到 React Native 中》 一文中，我们简单地介绍了『React Native 重写 Cordova 插件：复杂插件的调用』步骤： WebView 调用...RN 方法，并监听 React Native 返回的相应事件 React Native 接收到 WebView 的调用，调用原生代码，并监听原生代码返回的相应事件 原生代码执行 React Native...调用的方法，并响应事件给 React Native React Native 接收到原生代码的值，执行 injectJavaScript 注入代码到 WebView 里并执行 注入的 JavaScript...Native 发过来的内容，当接收到内容将数据以广播的形式发出。...Native 调用的方法，并响应事件给 React Native 如上，由于 iOS 的日期插件是异步的，并且它只能通过方法，而非组件的方式来唤醒 UI，故而需要 sendEventWithName

    4.7K100

    干货 | 揭秘携程三端通用框架中的CRNWEB

    2）一致性，和现有技术框架的集成问题，即如何将CRN-WEB与CRN和React-Native进行友好的集成，各自发挥各自的功能，如何保证各平台间的一致性？...如果CRNWEB的设计也基于React-Native的规范，把React-Native抽象成一个逻辑层，为不同的平台提供相同的Component和API输出和相同的APP主要运行流程，然后在规范之下各个平台各自实现...它虽然是一个最简单的Hello World，但是它几乎包含了React-Native的Component和API，以及主要的运行流程。...第一点，我们要实现在Web平台上面，跟React-Native上面具有相同功能的Component和API，比如这里的View和Text，这个就是我们后面要讲到的组件系统。...这样就非常方便对代码进行优化和处理，并使数据可视化了。 我们现在项目有多大，它的主要代码组成结构是什么样的，它的每一个模块，每一个依赖，每一个组件size占比多少，都可以进行精确的数据分析。

    1.9K30

    React Router v4教程：为你的 React 应用创建路由

    在 React Conf 2017 的演讲中，他们通过展示如何将路由概念无缝地从 Web 平台投射到 Native 平台，以及将 React Router 集成到 VR 并在 React Native...虽然他们的谈话中的着眼点是围绕路由器 API 是如何“All About Components”的。 在React中，只涉及单个 “Html” 文件。...每当用户输入新的 URL 请求时，路由不会从服务器获取数据，而是为每个新的 URL 请求交换不同的 Component。...用户看上去是在多个页面之间进行切换，但实际上，根据我们的需要实现了多个视图，每个单独的组件被重新渲染。 React 是如何实现这一目标的？ 这就是'History'的概念出现在图片中的地方。...React Router v4 的优点 本质上我们是想在 React 的 render 方法中调用 Router Component。这是因为整个 Router API 都是关于组件的。

    3.4K20

    React Native跨平台开发2017 年终总结

    从2016年开始关注React Native到现在，React Native的每一个版本发布我都会关注一下，虽然最近将重心转移到区块链开发上，这一年里，我还出版了一本《React Native移动开发实战...在过去的一年中React Native经历了十几次的版本迭代，版本也从从v0.40升级到v0.52，总体来说，版本迭代没以前那么频繁，组件也越来越丰富，稳定性也越来越好了，下面就一些新组件，新API进行相关的总结...React Native年度功能 首先，借用网络上的一张图，一个使用Xmind绘制的React Native功能的图，该图简单明了的介绍了React Native在2017年的一些变化。...其他新增 ViewPropTypes：View 中的 propTypes 被移到 ViewPropTypes中，使用时需要单独导包。...废弃组件及API 随着React Native版本的更新，React Native废弃了一些过时的API和组件。

    3.7K70

    浅谈移动应用的技术选型｜TW洞见

    而且将资源打包到本地也可以在一定程度上缓解从远端加载静态资源导致UI展示延迟的问题，并且还可以通过桥接Native和Web来调用一些Device的API。...但其劣势也很明显，一是通过WebView执行代码效率较低，很难实现一些炫酷的效果，并且还存在不同设备的兼容性问题；二是如果想调用相关平台的API，需要针对平台单独进行开发，如果在应用中用到了大量的Native...零售商Android应用零售商微信端 3 React Native 把React Native单独拿出来，是因为确实不能简单的将它分到其它任意一种方案里面去。...虽然大部分代码是平台无关的，但是平台相关的代码都需要单独实现，这虽然对跨平台带来了不便，但是引入的好处也是显而易见的，View层的部分通过原生组件实现，性能比其他WebView的方案不知道高到哪去了。...考虑多种因素，在技术选型上做出更充分的考量，才是真正正确的选择。所以说又回到那句老话上：“It depends…”

    1.9K110

    React Native 项目 Web 端同构初探

    “Learn once, write anywhere”,完全不影响 React Native 沦为“不会 JavaScript 也能用”的框架，那如何将在 React Native 项目中引入 react-native-web...现 Facebook 工程师 Nicolas Gallagher 实现并维护的开源项目，是一个使 React Native 组件和 API 能运行在 Web 上的库，其和 React Native Windows..., React Native macOS 等库将 React Native 拓展到一个又一个新的平台。...当然值得注意的是，官方文档明确表示不支持 React Native 中不推荐使用的组件和 API，因此如果您项目中的某些功能依赖第三方库，可能那部分的功能在 web 端同构时需要额外处理。...浅显地认为react-native-web就是把React Native的组件和API都用适用于Web的标签和API再适配实现一遍，使其在Web上的行为和在原生应用上尽量保持一致，从文档中提到的 Alert

    4.8K30

    React Native运行原理解析

    扩展的API， 则直接通过bridge调用native方法; 如果是UI界面， 则映射到virtual DOM这个虚拟的JS数据结构中，通过bridge 传递到native ， 然后根据数据属性设置各个对应的真实...即把当前APP的对象注册到AppRegistry组件中， AppRegistry组件是js module。 接着就等待Native事件驱动渲染JS端定义的APP组件。 2、Native 入口 ?...支持三种类型模块配置， native module(实际就是不需要操作View结构的API), view managers(实际是映射到virtual DOM中的View组件)， JS module 。...但RN的通信的实现机制是单向调用，Native线程定期向JS线程拉取数据， 然后转成JS的调用预期，最后转交给Native对应的调用模块。...目前官方的生产工具是把框架代码和业务代码弄成一个bundle。 但框架代码很大，需要共用， 因此要分离出框架代码单独前置加载。 应用业务代码变成很小一段JS代码单独发布。

    6.8K90

    使用Enzyme测试React（Native）组件｜洞见

    React.js作为前端框架的后起之秀，却在2015年携着虚拟DOM、组件化、单向数据流等利器，给前端UI构建掀起了一波声势浩大的函数式新潮流。...React已经让UI测试变得容易很多，React组件都可以被简化为这样一个表达式，即UI=f(data)，这个纯函数返回的只是一个描述UI组件应该是什么样子的虚拟DOM，本质上就是一个树形的数据结构。...前面我们所谈论的都是如何测试使用react-dom所构建的React组件，即最终渲染的结果是浏览器当中的DOM结构，但对于React Native来说，JavaScript代码最终会被编译并用于调用iOS...事实上，我们可以通过欺骗React Native让它返回常规的React组件而不是Native组件，然后就又能愉快地使用传统的JavaScript测试库来单独测试React Native组件逻辑。...这个辅助库，这是一个使用纯JavaScript将全部的React Native组件进行mock的第三方库，只需要导入这个库就可以对React Native组件进行渲染和测试。

    3.2K40

    跨端移动应用开发解决方案 | ARES小程序转换工具1.0 正式发布

    React运行时 回到我们一开始提出的“动态”与“静态”的问题。 比如这样的React Native代码： ? 这里的x是this.f()这个函数的返回值。但是这个函数具体返回什么呢？...与React是一样的，通过这样的一个过程把小程序渲染需要的数据都准备好。 最后一步：把运行时结果更新到页面上，刚才我们说了React执行环境会准备好所有小程序渲染需要的数据。...这些数据最终会交个对应的小程序组件实例，然后小程序调用自己的setData方法，把数据更新到页面上。...同时实例销毁的时候，也会通知这个模块移除这个实例。它打通了React环境和小程序环境，使之可以双向交互。 组件/API对齐 接着上面的过程，假设是这样的一个页面： ?...当我们React Native‘运行’结束，把数据交给小程序更新UI的时候，小程序这里也必须存在一个‘FlatList’实例去接受这份数据。

    3.2K20

    移动跨平台框架ReactNative 组件属性 props【08】

    React Native，是一个混合移动应用开发框架，是目前流行的跨平台移动应用开发框架之一。React Native 采用不同的方法进行混合移动应用开发。...它不会生成原生 UI 组件，而是基于 React，React Native 是一个用于构建基于 Web 的交互界面的 JavaScript 库，因此会有更丰富的 UI 体验效果，同时也能够很好地调用底层框架的...React Native 组件属性 props 前面章节 React Native 组件状态 state 中我们简单的介绍了下 组件属性 props。...本章节我们将详细介绍 组件属性 props 以及如何将属性状态 state 和属性组件 props 组合在一起使用。...如果不需要保存状态，建议不要使用容器组件。 范例 容器组件是最普通的组件， React Native 内置的大部分组件都是容器组件，它们多有一个 state 来保存状态。

    1.2K30

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

    这是react-test -library解决的一个问题，因为理想情况下，你只希望您的用户界面能够正常工作，并最终正确地渲染出来。 如何将数据获取到这些组件并不重要，只要它们仍然提供预期的输出即可。...模拟每个外部依赖项(API响应、localStorage等)。 查看应用程序状态在与运行实例交互时的实时演变。 13....例如，假设正在创建一个React组件，该组件将文件作为props来显示有用的信息，如元数据 元数据组件的逻辑占用了大量的行，因此咱们决定将其拆分为单独的文件。...最近还添加了React VR，非常棒。 20. Awesome React Awesome React开源库是一个与React相关的很棒的列表。 我可能会忘记其他网站并单独从这个链接学习React。...Proton Native Proton Native为咱们提供了一个React环境来构建跨平台的本机桌面应用程序。

    3.2K30

    ReactJS到React-Native，架构原理概述

    对于 React Native ，React Native 调用Objective-C 的API 去渲染iOS 组件，调用Java API 去渲染Android 组件，而不是渲染到浏览器DOM 上。...组件化，数据绑定 Virtual DOM JSX模板学习使用有一定的成本Vue.JS 组件化，数据绑定 Virtual DOM 模板就是普通的html，数据绑定使用mustache风格，样式直接使用css...推荐的方式是使用React-Native提供的Animated API。...宿主平台APIWeb 环境的React 与React Native 最大的不同，应该就在于宿主平台的API 了。...API 囊括了许多功能，从数据存储到地理服务，以及操控硬件设备（如摄像头）等。非常规平台上的API 会更有趣，例如，React Native 和虚拟现实头盔之间的API 会是什么样的呢？

    6.6K10

    ReactJS到React-Native，架构原理概述

    对于 React Native ，React Native 调用Objective-C 的API 去渲染iOS 组件，调用Java API 去渲染Android 组件，而不是渲染到浏览器DOM 上。...组件化，数据绑定 Virtual DOM JSX模板学习使用有一定的成本Vue.JS 组件化，数据绑定 Virtual DOM 模板就是普通的html，数据绑定使用mustache风格，样式直接使用css...推荐的方式是使用React-Native提供的Animated API。...宿主平台APIWeb 环境的React 与React Native 最大的不同，应该就在于宿主平台的API 了。...API 囊括了许多功能，从数据存储到地理服务，以及操控硬件设备（如摄像头）等。非常规平台上的API 会更有趣，例如，React Native 和虚拟现实头盔之间的API 会是什么样的呢？

    7.6K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券