李浩然的专栏

因为WebStorm对JS的格式化 不是很习惯，就改用 Subline Text 3,但在安装Package Control 时候一直出现这个错误 ：按网上修改hosts，折腾了好久，也是不行,还好最后找到了方案，下载好的插件直接放置到Packages目录，重启Sublime Text 插件就会安装成功了手动安装：手动安装Package Control：1.点击Prefer

首先第一种 ES5的写法 getInitialState: function () { return { currentPage: 0, }; },第二种 ES6的写法 constructor(props) { super(props); this.state = {currentPage:0};

首先是ES5 的写法  是通过 getDefaultProps(){ return {duration:1000} }ES 6 的写法如下： static defaultProps = { duration:1000, }但他们的调用都是通过 this.props.XXX  来进行调用 比如调用duration  就是通过 thi

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSheet, AsyncStorage, Image, Text

参考原文：http://www.jianshu.com/p/3699a6e34e50position布局position:enum('absolute','relative')。先简单的看一下示例图position:'relative'相对布局。这个和html的position有很大的不同，他的相对布局不是相对于父容器，而是相对于兄弟节点。position:

引用的组件首字母应该大写  小写就会造成错误  Expected a component class,got[object Object]import React, { Component } from 'react';import { AppRegistry, StyleSheet, TextInput, TouchableOpacity, ScrollView,

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSheet, TextInput, TouchableOpacity

一：创建json 文件  放在  ./data/目录下{    "employees": [        {            "FamilyName": "张",            "giveName": "三",            "salary": 1        },        {            "FamilyName": "

新建一组件  ImageEqualEnlarge.js/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { StyleSheet, Text, TextInp

1.首先如果文件index.android.js   或者 index.ios.js  我这里用的是前者/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import {

1.为了测试用的是本地图片，首先图片资源集成到项目中。这里是android适配的项目 将图片资源放置在下面 通过json 方式访问项目名称\android\app\src\main\res\drawable文件   NewWine.json{ "data":[ { "image": "gujing", "money":

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。 本文给大家汇总介绍了5种使用javascript实现全局唯一标识符（GUID,UUID）的方法，非常的全面，有需要的小伙伴可以来参考下全局唯一标识符（GUID

转自：http://www.jianshu.com/p/0c91a9e810b4RN 第三方库快速查找网址：https://js.coach/（下面的文章以https://github.com/rebeccahughes/react-native-device-info为例）1、安装rnpm，输入命令：npm install rnpm -g  （注意:rnpm需要node4

这里通过一个简单的例子来阐述Navigator页面的跳转与数据的传递：查询用户信息的例子，FirstPageComponent传递id到SecondPageComponent，然后SecondPageComponent返回user信息给FirstPageComponent import React, { Component } from 'react';i

ES 5 的写法constructor(props) {    super(props);        this.state = {      style:{}    };  }ES6的写法   getInitialState:function() {     return {     style:{}     };   }

当滑动时，这个section header会固定在头部，也就是吸顶效果。但是遗憾的是，在Android平台上不支持吸顶效果实现吸顶效果需要用到此方法cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIdentities)此方法作用基本等同cloneWithRows，区别在于可以额外指定section

eveation 是Android 平台都有的样式键，它是数值类型的样式键，通过在组件的周围渲染阴影效果，让用户产生组件浮现在手机上的效果。import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View} from 'react-native';expor

这里用到的其实是一个新的场景页面 而不是像原生的组件一样 悬浮在页面之上，它实现的原理是从新绘制一个带弹出框样式的页面，除了弹出框之外都是灰色的，且将要显示弹出框页面的布局完全移植过来。理论不多说，直接上代码了首先弹出框文件  ConfirmDialog.jsimport React, {Component} from 'react';import {AppRegistry,View,T

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSheet, TextInput, ListView, Touc

实现效果  输入框左边有图标去掉下划线有一个白色带边框的背景render() {    return (                        鲜桥销售管理系统                                          让买卖更容易

import React, { Component } from 'react';import { AppRegistry, StyleSheet, Image, Text, TouchableHighlight, TextInput, StatusBar, View} from 'react-native';export default class Vi

为了熟悉Navigator的页面跳转，通过一个小例子实现：注册页面输入之后进入注册等待页面首先程序入口页面index.android.js 代码为：import React, {Component} from 'react';import {AppRegistry,Navigator,BackAndroid,Alert} from 'react-native';import Reg

1.这应用启动时能检测到设备是横置还是竖直的2.当设备横竖屏切换时候 能坚持到这个事件检测设备是竖直还是横置的一个方法是获取当前设备屏幕的宽与高，正常的设备在竖着的时候，宽小于高；而横置时，宽大与高。/** * Sample React Native App * https://github.com/facebook/react-native * @flow */i

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View} from 'react-na

在React  Native 开发中，开发者可以利用transfor 样式键 设置 实现组件的变形，从而实现文字或图像的变形。变形包括：translate(平移)、scale(缩放)、rotate(旋转)、skew(倾斜)四种类型。/** * Sample React Native App * https://github.com/facebook/react-native

一：安装Visual Studio Code 二：1.全局安装typingsnpm install typings --global三：在当前项目下执行命令：npm install @types/node @types/react --save一：安装Visual Studio Code 二：1.全局安装typingsnpm install typings --

1.下载gradle-2.14.1-all.zip 包链接：http://pan.baidu.com/s/1pKSXxjl 密码：89to2.将下载的gradle-2.14.1-all.zip 包 放入本地磁盘3. 修改(gradle/wrapper/gradle-wrapper.properties)中的distributionUrl，使其指向zip压缩包的本地路径。...

首次在真机上运行React native项目 遇到  这个问题 1> cmd 进入命令行模式 运行ipconfig 查看本地ip地址  2>运行 adb shell input keyevent 82 进入手机设置界面3>选择 最后一项 Dev Settings 4>选择 Debug server host&port for device5>配置与

在通过navigator 进行页面跳转的过程中  一直报 这样的错误先看程序入口文件index.android.jsimport React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  TouchableHighlight,    Navigator,}

一：module.exports与exports 的区别RN 首先组件的导出有两种方式    module.exports与exports  前者是ES5 写法  后者是ES6 写法，所以如果用ES5 导出一定要保持用ES5方式的引用方法  不然会报错的因为module.exports 初始值为一个空对象 {}exports 是指向的 module.exports

1.加载网络图片 import React, { Component } from 'react';import { AppRegistry, Image, View} from 'react-native';export default class ViewProject extends Component { render() { return (

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Image, Text, TouchableHig

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Image, Text, TouchableHig

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Image, Text, TouchableHig

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Image, Text, TouchableHig

在嵌套的Text组件中，子Text组件将继承它的父Text组件的样式，当使用嵌套的Text组件时，子Text组件不能覆盖从父Text组件继承而来的样式，只能增加父Text组件没有指定的样式。/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React,

loginView.js 页面 /** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Image,

如果有一张 20*10 的图片，要把它放入一个 40*30 的显示区域内，我们可以做到：contain 模式，图片显示分辨率为20*10，四周都有空白；cover模式，图片放大为 60*30，然后切成 40*30，丢失部分图片内容；stretch 模式，图片放大为 40*30，丢失原始的宽、高比。实现自定义组件 ImageEquallyEnlarg.js /**

在构建TabBar的方式上，使用React-native-tab-navigator（https://github.com/exponentjs/react-native-tab-navigator）干货直接上代码一：项目集成React-native-tab-navigator     在当前项目下 终端运行：npm install react-native-tab-navigator

ADB devices genymotion 出错cannot bind ‘tcp:5037’: Address already in use问题原因gnymotion 与 系统adb 调用的不是同一个sdk中的adb．所以个人猜测可能是其中一个启动了一个adb,之后再次启动的时候就提示端口占用了．（两个adb使用了同一端口）解决方案1.查看自己系统adb的路径$whi