Magic Studio

专心做有逼格的APP!

随笔分类 -  Javascript

自定义react-navigation的TabBar
摘要:在某些情况下,默认的react navigation的tab bar无法满足开发者的要求。这个时候就需要自定义一个tab bar了。本文就基于react navigtion v2来演示如何实现一个自定义tab bar。 这里主要处理的是再android里,当界面中有输入框,唤起软键盘的时候位于底部的 阅读全文

posted @ 2018-05-28 16:31 Mr 布鲁斯 阅读(5082) 评论(0) 推荐(1) 编辑

React-router v4教程
摘要:在这个教程里,我们会从一个例子React应用开始学习react router dom。其中你会学习如何使用 、`NavLink Switch exact`实现排他路由和浏览器路径历史。 也许学习react router最好的办法就是用react router dom v4来写一个多页的react应用 阅读全文

posted @ 2018-05-22 13:46 Mr 布鲁斯 阅读(813) 评论(0) 推荐(0) 编辑

ANTD mobile源码分析 -- popover
摘要:最近的开发中要用到很多的各式各样的组件。但是发现ant design mobile(后面简称ANTDM)里很多的资源。于是就分析一下,学习学习。 ANTDM直接使用了typescript,没有用ES2015,不过这不会是障碍,反而是学习typescript的一个好机会。基本上可以学的开源项目里比 阅读全文

posted @ 2018-03-04 21:42 Mr 布鲁斯 阅读(1809) 评论(0) 推荐(0) 编辑

编写React组件的最佳实践
摘要:此文翻译自 "这里" 。 当我刚开始写React的时候,我看过很多写组件的方法。一百篇教程就有一百种写法。虽然React本身已经成熟了,但是如何使用它似乎还没有一个“正确”的方法。所以我(作者)把我们团队这些年来总结的使用React的经验总结在这里。希望这篇文字对你有用,不管你是初学者还是老手。 开 阅读全文

posted @ 2018-03-03 21:58 Mr 布鲁斯 阅读(915) 评论(1) 推荐(2) 编辑

JavaScript的this和作用域
摘要:本文主要讨论一下JS的作用域和 关键字。作用域,就是你的方法或者变量可访问的区域,是他们执行的上下文。如果你见过这样的代码: 你就会很好奇为什么要用 赋值给一个变量 呢?你看完这篇文章就会清楚这个问题的答案了。 第一种作用域叫做全局作用域( Global Scope )这很容易定义,如果一个方法、变 阅读全文

posted @ 2018-01-20 23:20 Mr 布鲁斯 阅读(380) 评论(0) 推荐(0) 编辑

一步一步带你实现virtual dom(一)
摘要:"一步一步带你实现virtual dom(一)" "一步一步带你实现virtual dom(二) Props和事件" 要写你自己的虚拟DOM,有两件事你必须知道。你甚至都不用翻看React的源代码,或者其他的基于虚拟DOM的代码。他们代码量都太大,太复杂。然而要实现一个虚拟DOM的主要部分只需要大约 阅读全文

posted @ 2017-11-25 23:47 Mr 布鲁斯 阅读(487) 评论(0) 推荐(0) 编辑

一步一步带你实现virtual dom(二) -- Props和事件
摘要:"一步一步带你实现virtual dom(一)" "一步一步带你实现virtual dom(二) Props和事件" 很高兴我们可以继续分享编写虚拟DOM的知识。这次我们要讲解的是产品级的内容,其中包括:设置和DOM一致性、以及事件的处理。 使用Babel 在继续之前,我们需要弥补前一篇文章中没有详 阅读全文

posted @ 2017-11-25 21:40 Mr 布鲁斯 阅读(1599) 评论(0) 推荐(0) 编辑

Redux:从action到saga
摘要:前端应用消失的部分 一个现代的、使用了 redux 的前端应用架构可以这样描述: 1. 一个存储了应用不可变状态(state)的store 2. 状态(state)可以被绘制在组件里(html或者其他的东西)。这个绘制方法通常是简单而且可测试的(并不总是如此)纯方法。 3. 组件可以给store分发 阅读全文

posted @ 2017-11-20 11:29 Mr 布鲁斯 阅读(1328) 评论(0) 推荐(0) 编辑

初识Redux-Saga
摘要:"Redus saga" 是一个redux的中间件,主要用来简便而优雅的处理redux应用里的副作用(side effect相对于pure function这类概念而言的)。它之所以可以做到这一点主要是使用了ES6里的一个语法: "Generator" 。使用Generator可以像写同步的代码一样 阅读全文

posted @ 2017-11-18 08:43 Mr 布鲁斯 阅读(742) 评论(1) 推荐(0) 编辑

React Native填坑之旅 -- FlatList
摘要:在React Native里有很多种方法来创建可滚动的list。比如,ScrollView和ListView。他们都各有优缺点。但是在React Native 0.43里增加了两种行的list view。一个是 , 一个是 。今天我们就来详细了解一下 。 如果你熟悉RN之前的ListView的话你会 阅读全文

posted @ 2017-11-12 00:29 Mr 布鲁斯 阅读(5941) 评论(0) 推荐(0) 编辑

React Native填坑之旅 -- 使用react-navigation代替Navigator
摘要:`Navigator react native deprecated custom components react navigation`](https://reactnavigation.org/)那我们就来看看这个东西到底有什么好的,值不值得用。 一句话概括的话, 非常值得用。之前配置一个 阅读全文

posted @ 2017-11-07 22:55 Mr 布鲁斯 阅读(6111) 评论(0) 推荐(0) 编辑

React Native填坑之旅 -- 使用iOS原生视图(高德地图)
摘要:在开发React Native的App的时候,你会遇到很多情况是原生的视图组件已经开发好了的。有的是系统的SDK提供的,有的是第三方试图组件,总之你的APP可以直接使用的原生视图是很多的。React Native提供了一套完善的机制,你可以非常简单的用来包装已有的原生视图。 代码地址:https:/ 阅读全文

posted @ 2017-02-27 09:15 Mr 布鲁斯 阅读(2087) 评论(1) 推荐(0) 编辑

React Native桥接器初探
摘要:本文假设你已经有一定的React Native基础,并且想要了解React Native的JS和原生代码之间是如何交互的。 React Native的工作线程 :布局在这个线程工作 :UIKit在这里工作 :Js代码在这里工作 另外每一个原生模块都有自己的一个工作 ,除非你明确指定它的工作队列 原生 阅读全文

posted @ 2017-02-25 00:33 Mr 布鲁斯 阅读(765) 评论(0) 推荐(0) 编辑

理解React组件的生命周期
摘要:本文作者写作的时间较早,所以里面会出现很多的旧版ES5的时代的方法。不过,虽然如此并不影响读者理解组件的生命周期。反而是作者分为几种不同的触发机制来解释生命周期的各个方法,让读者更加容易理解涉及到的概念。以下是正文。 简介 在创建组件的时候会触发组件生命周期各个方法的调用。这篇文章就分别介绍其中的各 阅读全文

posted @ 2017-02-15 15:50 Mr 布鲁斯 阅读(252) 评论(0) 推荐(0) 编辑

Graphql入门
摘要:GraphQL是一个查询语言,由Facebook开发,用于替换RESTful API。服务端可以用任何的语言实现。具体的你可以查看Facebook关于 "GraphQL的文档" 和 "各种语言的实现" GraphQL的小历史 早在2012年,Facebook认为人们只有在离开PC的时候才会用智能手机 阅读全文

posted @ 2017-01-29 17:43 Mr 布鲁斯 阅读(15815) 评论(11) 推荐(5) 编辑

如何在NodeJS项目中优雅的使用ES6
摘要:如何在NodeJS项目中优雅的使用ES6 NodeJs最近的版本都开始支持ES6(ES2015)的新特性了,设置已经支持了async/await这样的更高级的特性。只是在使用的时候需要在node后面加上参数: 。但是,即使如此node也还是没有支持全部的ES6特性。所以这个时候就需要用到 "Babe 阅读全文

posted @ 2017-01-21 22:26 Mr 布鲁斯 阅读(7364) 评论(3) 推荐(1) 编辑

Fetch API
摘要:Fetch API 一个隐藏最深的秘密就是AJAX的实现底层的 ,这个方法本来并不是造出来干这事的。现在有很多优雅的API包装XHR,但是这远远不够。于是有了 API。我们来看看这个API的基本用法。最新的浏览器都已经支持这个方法了。 XMLHttpRequest XHR对于我来说太过复杂,用起来大 阅读全文

posted @ 2017-01-15 09:30 Mr 布鲁斯 阅读(3033) 评论(0) 推荐(0) 编辑

React Native填坑之旅--Stateless组件
摘要:Stateless component也叫无状态组件。有三种方法可以创建无状态组件。 坑 一般一个组件是怎么定义的: 很久以前的方法: 后来有了ES6 接ES6的光,看起来好了很多。 填坑 但是,一个组件不需要状态的时候还给出那么多的定义还是不够精炼,太麻烦。于是用 stateless compon 阅读全文

posted @ 2016-12-17 21:54 Mr 布鲁斯 阅读(1067) 评论(0) 推荐(0) 编辑

React Native填坑之旅--与Native通信之iOS篇
摘要:终于开始新一篇的填坑之旅了。RN厉害的一个地方就是RN可以和Native组件通信。这个Native组件包括native的库和自定义视图,我们今天主要设计的内容是native库方面的只是。自定义视图的使用会在后面讲到。 坑是什么样的坑 主要的是遇到一个业务需求,需要检测当前应用的版本是什么。需要返回当 阅读全文

posted @ 2016-12-07 15:32 Mr 布鲁斯 阅读(614) 评论(0) 推荐(0) 编辑

React Native填坑之旅--组件生命周期
摘要:这次我们来填React Native生命周期的坑。这一点非常重要,需要有一个清晰的认识。如果你了解Android或者iOS的话,你会非常熟悉我们今天要说的的内容。 基本上一个React Native的组件会经历三个阶段最终渲染在界面上,他们分别是:开始渲染、更新、卸载。 开始渲染: componen 阅读全文

posted @ 2016-11-22 14:12 Mr 布鲁斯 阅读(366) 评论(0) 推荐(0) 编辑

导航