2016年08月_于连林520wcf

12月 11月 10月 09月 08月 06月 05月

原创 [React Native]访问操作系统剪贴板 Clipboard

我们之前学习了TextInput组件, 有时候我们需要在TextInput组件中复制或者粘贴一些文字。 React Native为开发者提供了 Clipboard API,Clipboard 组件可以在iOS和Android的剪贴板中读写内容。目前还只支持获取或者存放字符串。主要方法static getString() 获取剪贴板的文本内容，返回一个Promise(后面会介绍) 你可以用下面的

2016-08-31 16:29:47 3525

原创 [React Native]高度自增长的TextInput组件

之前我们学习了从零学React Native之11 TextInput了解了TextInput相关的属性。在开发中,我们有时候有这样的需求, 希望输入区域的高度随着输入内容的长度而增长, 如下：这时候我们需要自定义一个组件：在项目中创建AutoExpandingTextInput.jsimport React, {Component} from 'react';import {AppR

2016-08-31 15:03:52 2123

原创配置上这个模板Bug少90%

本来写程序经常会碰到各种难缠的Bug，自从修改了注释模板，bug明显少了,我们以Android Studio为例点击菜单栏的“File“->“OtherSettings”->"Default Settings"，或者直接点击Setting按钮打开Settings窗口。

2016-08-30 17:35:01 1002

原创 [React Native]StatusBar的使用

StatusBar是React Native 0.20 新增的跨平台组件,它可以用来设置并动态改变设备的状态栏显示特性。虽然说是跨平台的组件, 但是有些属性不是跨平台的 ,我们需要注意下。因为IOS和Android本身有些区别,使用这个组件最好都要适配的。属性属性名描述 animated 布尔类型,用来设定颜色样式改变或者隐现时是否有动画,默认false hidden 布尔

2016-08-30 16:02:56 3351

原创 Android7.0 添加快速设定Quick Settings Tile

Android7.0新推出了一个非常实用的功能——添加快速设定（或者翻译成快速设置），但是感觉社区里关注的人比较少，可能目前为止国内还没有Android7.0的手机，但是越早接触越好，甚至可以告诉产品经理7.0以上可以实现此功能，从而让公司的产品更加与时俱进。“快速设置”通常用于直接从通知栏显示关键设置和操作，非常简单。在Android 7.0以后任何应用都可以在下拉菜单中添加自己的快速设定，从而让

2016-08-30 10:44:44 5565 4

原创 git笔记

来天津工作以来一直使用svn管理项目，最近有一段时间没有用git命令，发现好多指令都记不得了，又翻了下笔记，把git的一些指令总结下，防止自己忘了。首先需要明白git是分布式提交，先提交到本地然后复制到远程仓库。常用的: init：新建一个Git管理项目。 git add . 添加所有的修改，‘.’是通配符 git add 文件名或者文件路径，添加指定的 git rese

2016-08-29 14:35:32 911

原创 React Native-组件的引用

之前文章中，我们使用了许多React Native组件，也定义了一些组件。但是我们都没有定义组件的标识，我们都是通过回调方法处理组件对应的事件，这种情况能满足绝大多数需求，有些情况我们需要对组件进行操作，此时就需要获取组件的引用，进而通过该应用对组件进行操作。比如，我们可以通过引用拿到组件，修改组件的属性。定义组件的引用通过在JSX代码中加入 ref=”某个字符串”,就可以定义一个组件的引用名称,如

2016-08-27 17:37:51 1470

原创 React Native开源项目如何运行（附一波开源项目）

学习任何技术，最快捷的方法就是学习完基础语法，然后模仿开源项目进行学习，React Native也不例外。React Native推出了1年多了，开源项目太多了，我们以其中一个举例子.给大家演示下如何运行开源项目.(前提是你已经搭建好React Native环境了)下载开源项目首先需要找到开源项目 ,比如下面这个. 地址: https://github.com/Bob1993/react-nat

2016-08-27 11:19:44 2805

原创如何用一句话激怒设计师

最近在论坛上看到一群人讨论，如何用一句话激怒设计师。给大家贴出来。一，大家可以当段子看二，工作的时候一定要避免下面的情况，不然大家单身一辈子。尤其是程序员。 “你设计的这个图标比你还难看”这句话威力值100 ，可以瞬间激怒绝大多数设计师。这是我单位的美工设计师最不喜欢别人叫她美工，美工就是做图的，而设计师需要的是设计，审美等一系列能力，要学好多东西。 “美工” ，帮

2016-08-27 10:03:30 1682

原创从零学React Native之11 TextInput

TextInput 组件是用来通过键盘输入文字，可以使用View组件和Text组件样式，没有自己特定的样式。与Text组件类似，TextInput组件内部的元素不再使用FlexBox布局，而采用文本布局。详情见上一篇文章从零学React Native之10TextTextInput属性只列出了一些常用的，详情见官网属性名描述 defaultValue 字符类型,定义TextIn

2016-08-25 17:50:00 1062

原创从零学React Native之10Text

在React Native开发中,所有需要显示的字符串文本都需要放置在Text或者Text的子组件中。虽然在之前的文章中多次使用了Text组件，但是Text组件还是值得专门学习的, 并没有想象中的那么简单。任何一个组件，都有样式和属性，样式一般约束控件的样式和位置，定义在style属性中。属性就是直接声明在控件上。Text样式Text组件支持View的所有样式键。但是需要注意的是，Text内部的元素

2016-08-23 15:01:17 1388

原创 React Native等比放大不丢失图片

之前我们学习了从零学React Native之08Image组件大家可以发现, 原生的Image控件无法实现等比放大后无丢失显示。如：有一张20x10的图片, 要放入一个40x30的显示区域内. 1. cover模式(默认),图片放大为60x30, 然后切成40x30，会丢失部分显示的图片。 2. contain 模式, 图片分辨率为20x10, 四周都有空白。 3. stretch模

2016-08-17 10:08:07 1842

原创 React Native错误汇总(持续更新)

错误1 Element type is invalid…:错误描述: Element type is invalid: expected a String(for built-in components) or a class/function(for composite components) but got:object. check the render method of ‘….’ 这个

2016-08-15 17:36:37 1945 1

原创 React Native自定义导航栏

之前我们学习了可触摸组件和页面导航的使用的使用: 从零学React Native之09可触摸组件 … 从零学React Native之03页面导航 …经过之前的学习, 我们可以完成一个自定义导航栏了, 效果如下: 我们需要创建一个 NaviBar.js 用来显示顶部的导航栏, 还需要四个界面(Page1.js,Page2.js,Page3.js,Page4.js)。当然还需要修改ind

2016-08-15 17:32:43 4209 2

原创从零学React Native之09可触摸组件

可触摸组件有: TouchableHighlight,TouchableNativeFeedback,TouchableOpacity,TouchableWithoutFeedback 1. TouchableWithoutFeedback,在用户触摸的时候没有反馈任何触摸效果,体验很不好,基本很少使用. 2. TouchableNativeFeedback 是Android操作系统专用组件,

2016-08-12 14:36:06 1134

原创从零学React Native之08Image组件

开发过程中, 几乎每个项目都会用到图片. RN就是通过Image组件显示图片。既可以加载网络图片,也可以加载本地资源图片。 Image组件必须在样式中声明图片的款和高。如果没有声明，则图片将不会被呈现在界面上。网络图片加载加载网络图片非常简单，直接上代码：修改index.ios.js或者inde.android.jsimport React, { Component } from 'rea

2016-08-12 14:29:28 1123

原创从零学React Native之07View

View 组件是React Native最基本的组件.绝大部分其他React Native 组件.View组件的颜色和边框backgroundColor 键用来指定颜色. RN 0.19版本开始,只有Text和TextInput组件会继承父组件的背景颜色Opacity键定义了View组件的透明度, 取值0-1, 0表示完全透明borderStyle键用来设置边框的风格,只能取值solid,

2016-08-11 14:54:01 1082

原创 React Native中pointerEvent属性

在React Native界面开发中, 如果使用绝对定位布局,在代码运行时的某个时刻有可能会遮盖住它的下方的某个组件。这是因为绝对定位只是说这个组件的位置由它父组件的边框决定。绝对定位的组件可以被认为会覆盖在它前面布局（JSX代码顺序）的组件的上方.如果被遮盖住的组件需要处理触摸事件。比如我们在一个地图组件上覆盖了一个图像组件用来显示信息，又不想让这个图像组件影响用户手指拖动地图的操作，这时就需

2016-08-11 14:50:05 1417

原创从零学React Native之06flexbox布局

前面我们接触了好多React Native代码, 并没有介绍RN中的组件具体是如何布局的，这一篇文章，重点介绍下flexbox布局。什么是flexbox布局React中引入了flexbox概念,flexbox是属于web前端领域CSS的一种布局方案，是2009年W3C提出了一种新的布局方案，可以简便、完整、响应式地实现各种页面布局。你可以简单的理解为flexbox是CSS领域类似Android中 L

2016-08-08 16:55:47 1027

原创从零学React Native之05混合开发

本篇文章，我们主要讨论如何实现Android平台的混合开发.RN给Android端发送消息首先打开Android Studio, Open工程, 在React Native项目目录下选择android子目录下的build.gradle文件打开。React Native已经默认帮我们创建好了两个类MainApplication和MainActivitypublic class MainApplicat

2016-08-05 15:58:50 2169 7

原创 React Native声明属性和属性确认

属性声明因为用React Native创建的自定义组件可以复用, 我们开发过程中可能一个项目组有多个人同时开发,其他同事可能会用到我们自定义的组件, 但是他们使用的时候很容易忘记使用某些属性,这时候我们应该在自定义组件中声明一些属性。 //自定义组件export default class ConfirmDialog extends Component { //....}ConfirmDi

2016-08-05 15:47:18 5265

原创从零学React Native之04自定义对话框

之前的我都是利用React Native提供的基础组件对它们进行排列组合, 其实自定义也很简单, 我们还是拿上一篇文章的例子进行扩展。当我们点击注册的时候，可以弹出一个对话框，让用户确认一下，如下图：

2016-08-05 15:41:11 4926

原创从零学React Native之03页面导航

之前我们介绍了RN相关的知识：是时候了解React Native了从零学React Native之01创建第一个程序从零学React Native之02状态机本篇主要介绍页面导航上一篇文章给大家介绍了简单界面的搭建, 这一篇我们需要两个界面, 一个是注册界面,一个是注册信息界面. 当然我们还需要一个组件去控制两个界面的切换.每个界面其实就一个组件 , 可以通过下面的代码抽取相关的模块m

2016-08-02 09:04:54 1182

原创从零学React Native之02状态机

本篇文章首发于简书欢迎关注之前我们介绍了RN相关的知识：是时候了解React Native了从零学React Native之01创建第一个程序本篇文章主要介绍下下面的知识: 1.简单界面的搭建 2.状态机添加 3.渲染框架简介 4.语法简化搭建界面之前我们介绍了如何创建一个应用,现在我们来开发一个简单的注册界面。注释都写在代码里了, 如下：进入项目目录下，修改下index.an

2016-08-02 09:00:06 1125

原创从零学React Native之01创建第一个程序

本篇首发于简书欢迎关注上一篇文章是时候了解React Native了介绍了React Native。大家应该对React Native有个初步的认识。接下来我们就可以初始化一个React Native项目了。创建项目打开命令窗口，进入我们希望建立的项目目录所在的父目录后，输入命令react-native init AwesomeProject其中AwesomeProject是项目的名称。默认in

2016-08-02 08:50:45 1118

原创是时候了解React Native了

文章首发于简书,欢迎关注随着科技的发展，手机开发也在向好的方向不停的转变。IOS和Android两大手机操作横空出世，称霸江湖。我们每开发一个手机软件最少都需要开发这两个终端。两大操作系统都在不断的提升完善,能力越来越强大,这对于我们开发者是好事，因为用智能手机的用户越来越多。话天下大事，分久必合，合久必分。这句话对于移动开发也是一样的。这几年来，移动应用开发者做梦都希望有一个能跨平台的

2016-08-02 08:38:52 1174