flow不是React Native必会的技能,但是作为正式的产品开发优势很有必要掌握的技能之一.所以,算是RN填坑之旅系列的番外篇. Flow是一个静态的检查类型检查工具,设计之初的目的就是为了可以发现JavaScript脚本里不容易被发现的错误.在js开发的过程中,总会遇到一些问题.小的还可以,比如用alert或者console等输出一些信息可以debug,并解决.但是如果项目比较大的时候,这些手法只能起到一定的辅助作用.更有甚者,有些问题不运行到那段代码,根本不会发现错误.Facebook…

终于开始新一篇的填坑之旅了.RN厉害的一个地方就是RN可以和Native组件通信.这个Native组件包括native的库和自定义视图,我们今天主要设计的内容是native库方面的只是.自定义视图的使用会在后面讲到. 坑是什么样的坑 主要的是遇到一个业务需求,需要检测当前应用的版本是什么.需要返回当前的版本号和build数. 主要的需求在native来说非常简单: NSString * version = [[NSBundle mainBundle] objectForInfoDictionar…

代码在这里: https://github.com/future-challenger/petshop/tree/master/client/petshop/src/controller 回头看看RN的填坑之旅系列,发现一路写下来都是我在开发中遇到的问题如何解决的.兴之所至,不问顺序.于是出现一个问题,填坑系列和学习知识的顺序不是很一致.比如今天要说的布局问题.其实在一个app开发之前,就应该有所了解.否则的话每次看到的<View style={{flex: 1}} />代表的是什么呢?上来就…

如同黑夜里的一道光一样,就这么知道了F8. F8是每年一次Facebook每年一次的开发者大会.每次大会都会release相应的APP,iOS.Android都有.之前都是用Native开发的,但是2016的这一次是用React Native开发的. FB开源了RN的App 这次fb不仅开源了纯RN写的App,而且一同发布的还有开发这个App的教程.FB承诺会不断的更新这个app.教程放在make it open.不幸的是这个站点居然被墙了!!!技术博也能被墙,心中跑过一万个草泥马!!!F8的A…

这次我们来填React Native生命周期的坑.这一点非常重要,需要有一个清晰的认识.如果你了解Android或者iOS的话,你会非常熟悉我们今天要说的的内容. 基本上一个React Native的组件会经历三个阶段最终渲染在界面上,他们分别是:开始渲染.更新.卸载. 开始渲染: componentWillMount componentWillMount(): void 组件开始渲染的时候调用这个方法 componentDidMount componentDidMount(): void 组件…

React Native的导航有两种,一种是iOS和Android通用的叫做Navigator,一种是支持iOS的叫做NavigatorIOS.我们这里只讨论通用的Navigator.会了Navigator,NavigatorIOS也就不是什么难事了. 本文所使用的是React Native 0.34.FB团队更新的太快了,我会在后续出现大的改动的时候更新本文以及代码. Navigator基础 Navigator在不同的Scene之间跳转. initialRoute对象 这是Navigator所…

列表显示数据,基本什么应用都是必须.今天就来从浅到深的看看React Native的ListView怎么使用.笔者写作的时候RN版本是0.34. 最简单的 //@flow import React from 'react'; import { Text, View, ListView } from 'react-native'; export default class DemoList extends React.Component { constructor(props) { super(p…

动画是提高用户体验不可缺少的一个元素.恰如其分的动画可以让用户更明确的感知当前的操作是什么. 无疑在使用React Native开发应用的时候也需要动画.这就需要知道RN都给我们提供了那些动画,和每个动画可以处理的功能有哪些. 填坑材料Animated 动画API提供了一些现成的组件:Animated.View,Animated.Text和Animated.Image默认支持动画.动画API会调用iOS或者Android的本地代码来完成这些组件的位移.大小等动画.这样各种动画在视觉上可以非常的流…

从React过来,发现React Native(以下简称RN)居然没有Button.隔壁的iOS是有UIButton的,隔壁的隔壁的Android里也是有的.没有Button,就没有点击效果啊.这还真是让人郁闷了. 坑 什么叫Button.略去各种细节可以得出一个定义:可以处理用户点击,在用户按下的时候有按下的效果,松开之后立即回复到原来的效果上. 在React里,可以使用直接使用HTML的元素.比如,<button />或者<input type="button"…

在开发React Native的App的时候,你会遇到很多情况是原生的视图组件已经开发好了的.有的是系统的SDK提供的,有的是第三方试图组件,总之你的APP可以直接使用的原生视图是很多的.React Native提供了一套完善的机制,你可以非常简单的用来包装已有的原生视图. 代码地址:https://github.com/future-challenger/react-native-gaode-map 下面就用高德地图作为例子讲解如何包装原生视图.高德地图本身不仅有视图需要展示,还有一些和Rea…

Stateless component也叫无状态组件.有三种方法可以创建无状态组件. 坑 一般一个组件是怎么定义的: 很久以前的方法: const Heading = createClass({ render() { return <Text>{this.props.title}</Text> } }) 后来有了ES6 class Heading extends Component { render() { return <Text>{this.props.title}…

Navigator已经被React Native废弃了.也许你可以在另外的一个依赖库里react-native-deprecated-custom-components里找到.不过既然官方推荐的是react-navigation那我们就来看看这个东西到底有什么好的,值不值得用. 一句话概括的话,react-navigation非常值得用.之前配置一个Navigator非常的繁琐,但是使用react-navigation的任何一个导航组件都非常简单.项目的github地址在这里. react-na…

在React Native里有很多种方法来创建可滚动的list.比如,ScrollView和ListView.他们都各有优缺点.但是在React Native 0.43里增加了两种行的list view.一个是FlatList, 一个是SectionList.今天我们就来详细了解一下FlatList. 如果你熟悉RN之前的ListView的话你会发现FlatList的API更加的简单,只需要给它一列数据,然后根据每一项数据绘制行就可以. 源代码在github上.代码中使用的是RN 0.49.5.…

回归RN,非常开心啊! 在React Native 0.49.5上开发,直接遇到一个ios模拟器的问题.这个问题很简单就是Bundle URL not present. 在网上找了很多的解决方法,都不能用. 最后发现,其实就是访问localhost的时候找不见地址.只要把localhost改成127.0.0.1就可以了.但是从哪里改呢?stackoverflow的方法并不可行,OC的文件早就移动的不知道哪里去了. 于是乎,只好从AppDelegate.m文件里的js code location方…

无论React还是RN都已经迈入了ES6的时代,甚至凭借Babel的支持都进入了ES7.ES6内容很多,本文主要讲解类相关的内容. 构造函数 定义侦探类作为例子. ES5的"类"是如何定义的. function ES5Detective() { console.log('##ES5Detective contructor'); } ES6定义类: class ES6Detective { constructor() { console.log('Detective constructo…

如果不能从头到尾的建立一个RN应用,那么RN将失色不少.本以为HTTP请求部分需要使用Native的实现,Android和iOS各回各家,各调各库了.Google了一下之后居然RN可以使用fetch库.这个库是用来代替流传已久的XHR的. 下面看看如何使用fetch 请求Restful API的.API是dribbble的.这个API需要注册,所以如果你要运行下面的例子的话,最好注册一下,或者换一个站点的API试试. 随着ES6,JavaScript内置的支持了Promise这个填补回调地狱大坑…

比较精细的动画可以用Animated来控制.但是,在一些简单的界面切换.更新的时候所做的动画里再去计算开始值.结束值和插值器如何运作绝对是浪费时间. RN正好给我们提供了LayoutAnimation来解决这个问题.按照官方的说法:LayoutAnimation就是用于在下一个绘制或者布局周期(render/layout cycle)里处理界面中全部视图的动画的. 下面看一个例子: export default class DemoLayoutAnimation extends React.Co…

React Native 填坑一 关于RN的布局 分为主轴和交叉轴, 主轴可以是横向也可以是竖向,交叉轴也是对应的. 主轴默认是竖向.如果要更改用flexdirection 主轴对齐方式:justifyContent 交叉轴对齐方式:alignItems 问题1. 横向排列居中对齐 要改主轴的方向 flexDirection:"row",justifyContent:"center"} 问2.水平布局并铺满的问题 要铺满用flex:1 . 如果发面没有铺满,居中显示…

原文连接:http://www.studyshare.cn/blog-front/blog/details/1137 最近做一个app,使用React Native实现,如果严格按照RN官方文档去配置环境并初始化一个全新的项目,一路走下来,基本上是没有问题的. RN截止目前最新版本是0.58,如果之前的项目要在xcode和android studio上运行起来,可能会遇到各种各样的问题. 运行一些版本比较老的开源项目几个注意点: 1.android sdk 环境变量要配置好,具体参考RN官方文档…

下面对报错进行一下详细描述: 在debug时,点着点着,就会发生: 1.手机显示如下 : Attempted to transition from state `RESPONDER_INACTIVE_PRESS_IN` to `RESPONDER_ACTIVE_LONG_PRESS_IN`, which is not supported. This is most likely due to `Touchable.longPressDelayTimeout` not being cancelle…

React Native之坑总结(持续更新) Genymotion安装与启动 之前我用的是蓝叠(BlueStack)模拟器,跑RN程序也遇到了一些问题,都通过搜索引擎解决了,不过没有记录. 但是BlueStack有一些问题,比如没有菜单键,模拟器默认是横向的,商业化太严重(本来是用来玩游戏的),界面太丑,等等...... 于是我按照RN中文网的推荐下载了Genymotion模拟器,这一下,就是万劫不复...... 我是在官网下载的Genymotion,自带VirtualBox 5.0.4版本.下…

Boss说,我们买了个权威证书,不如做全站式的https吧,让用户打开主页就能看到受信任的绿标.于是我们就开始了填坑之旅. [只上主域好不好?] 不好...console会报出一大堆warning因为图片域没有https-浏览器证书符号也不是绿色的- [在哪里解密SSL?] 大网站都是架构复杂的啦-各层负载均衡和动静分离-其中最经典的就是图片和应用分离,这也导致了我们要给两个域配证书. 想过在NginX配,好处是在一台机上只配一个证书,坏处是多个机器的配置难以管理,所以只好在前面HA层配- 具体…

应公司需求,改版公司ERP的数据显示样式.由于前期开发的样式是bootstrap,所以选bootstrap-table理所当然(也是因为看了bootstrap-table官网的example功能强大,样式清爽). 然后... ... 开启bootstrap-table填坑之旅. 开始就扒本园的资源,确实有不少bootstrap-table的文章.确实写的不错很详细,请恕本菜实在菜了点,看了半天demo的页面都没弄出来(勿吐槽~~).终于11点了.. .. 于是决定跟着官网的小白教程一点点的玩.…

原文发表于本人博客,点击进入使用vue开发微信公众号下SPA站点的填坑之旅 本文为我创业过程中,开发项目的填坑之旅.作为一个技术宅男,我的项目是做一个微信公众号,前后端全部自己搞定,不浪费国家一分钱^_^. 我决定实现如下功能 架构上,实现前后端分离.方便以后前后端的分工 考虑到体验,前端做成SPA站点,也就是单页面应用 需要使用微信的JSSDK 需要有微信支付功能 作为一个偏后端的半专业前端人士,经过一两周的调研和学习后, 我决定使用如下技术 后端使用php搭建接口,本文主要讲前端,不细说 w…

转载请注明:https://www.cnblogs.com/rockyf/p/11691622.html 开篇 开篇一定要精彩,不然路人不理睬!下述是笔者作为arm小白的填坑之旅 没错,这个之前一直从事软件开发的笔者,开始搞硬件了,当然仅仅是数电!模电需要有很扎实的电路基础,而笔者有的只有"扎实"的逻辑基础. 那为什么笔者要开始搞硬件呢? 其实早在大学期间,笔者所在专业(计算机科学与技术)中就有一门课就专门讲了硬件-软件的连接以及实现,只怪当初没有好好学,只是心中有那么个印象,就是时钟…

SAS信用评分之番外篇异常值的识别 今天想分享给大家的是我早期建模的时候一个识别异常值的办法,也许你在"信用风险评分卡研究"看过,但是代码只能识别一个变量,我将这个代码作了改良,但是我在这里必须声明一点,就是假设你身处的公司数据并不多的话,我不建议你使用这个代码,因为我是简单粗暴的将异常值直接剔除了. 就因为我的数据不多,所以我之前在做建模的时候使用的是先等量分组再最优分段的方式来使变量不用识别异常值,说道这里,我又需要跟大家提醒一下就是关于最优分段的代码,说有过拟合的现象.这里跟大家…

目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策略(MVC5+EF6) [第四篇]ASP.NET MVC快速入门之完整示例(MVC5+EF6) [番外篇]ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6) 请关注三石的博客:http://cnblogs.com/sanshi FineUIMvc简介 FineUIMvc 是基…

iOS冰与火之歌(番外篇) 基于PEGASUS(Trident三叉戟)的OS X 10.11.6本地提权 蒸米@阿里移动安全 0x00 序 这段时间最火的漏洞当属阿联酋的人权活动人士被apt攻击所使用的iOS PEGASUS(又称Trident三叉戟)0day漏洞了.为了修复该漏洞,苹果专门发布了一个iOS 9.3.5版本.这个漏洞的厉害之处在于可以直接从沙盒内对内核进行攻击(无需沙盒逃逸),并且同时影响iOS(9.3.4)和OS X (10.11.6).因此,本篇文章将会从PEGASUS漏洞形…

这次博客园的排版彻底残了..高清版请移步: https://zhuanlan.zhihu.com/p/24425116 本篇是前面两篇教程: 给深度学习入门者的Python快速教程 - 基础篇 给深度学习入门者的Python快速教程 - numpy和Matplotlib篇 的番外篇,因为严格来说不是在讲Python而是在讲在Python下使用OpenCV.本篇将介绍和深度学习数据处理阶段最相关的基础使用,并完成4个有趣实用的小例子: - 延时摄影小程序 - 视频中截屏采样的小程序 - 图片数据增…

最近在看有关Eclipse RCP方面的东西,鉴于Gephi是使用opengl作为绘图引擎,所以,萌生了在Eclipse RCP下添加画布,使用opengl绘图的想法,网上有博文详细介绍这方面的内容,但是没有强调版本,造成我在搭建环境以及编码时阻碍重重,本篇的重点主要是针对几个遇到的问题,强调版本的重要性以及这个问题的主要思路. 环境介绍 eclipse: eclipse-dsl-luna-SR1a-win32(32位) jdk: jdk1.6.0_22(32位) opengl: eclipse…