Windows下配置Gradle

一、安装 安装Gradle

1. 新建环境变量 GRADLE_HOME，即 D:\local\\gradle-2.4； 2. 修改环境变量 Path，即追加 %GRADLE_HOME%\\BIN;

二、验证Gradle

1.输入快捷键 WIN+ R，输入 cmd，在弹出的窗口输入命令行： gradle -v；

三、体验Gradle

1．创建工程所在目录，本经验创建于 c:\\gdemo； 2．创建空白的 build.gradle 文件，并打开；

3.在第一行输入 apply plugin: 'java'，并执行命令：gradle build

运行结果

Windows 下搭建React Native开发环境

安装Node JS

官网下载：https://nodejs.org/en/ 4.0以上版本的node js

安装react-native-cli

npm install -g react-native-cli

初始化项目

react-nativeinitAwesomeProject

init项目时，我这边卡住了很久才初始化完成，可能是下载node_modules太耗时间了。如果你也在init时卡住的话，可以直接clone我初始化好的项目

git clone https://github.com/chenyangcun/AwesomeProject.git

配置环境变量

请设置环境变量ANDROID_HOME指向Android SDK的目录

安装Genymotion模拟器

详情参考：

http://jingyan.baidu.com/article/eae07827a7c6a01fec85c3.html

启动

1. 首先启动React Native Server：react-native start

2. 重新开一个终端(cmd), 切换到项目目录安装APP

cd android

gradlew.batinstallDebug

参考：http://reactnative.cn/docs/0.22/tutorial.html 想开发Android版本，先连接你的设备或启动模拟器，然后在AwesomeProject目录下运行react-native

run-android，就会构建工程并自动安装到你的模拟器或者设备，同时启动用于实现动态代码加载的Node服务。当你修改代码之后，你需要打开摇一摇菜单(摇一下设备，或者按下设备的Menu键，或者在模拟器上按下F2或Page Up，Genymotion按下⌘+M)，然后在菜单中点击“Reload JS”。 在本向导中我们会创建一个简单的Movies应用，它可以获取25个上映中的电影，然后把他们在一个ListView中显示。

1.参考案例 React-Native

http://blog.csdn.net/xu_fu/article/details/48596297 2.怎么创建一个对于整个App的全局变量

http://bbs.reactnative.cn/topic/9/%E6%80%8E%E4%B9%88%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E5%AF%B9%E4%BA%8E%E6%95%B4%E4%B8%AAapp%E7%9A%84%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F/2

3. React Native 自定义事件机制 http://ju.outofmemory.cn/entry/205151 4.

控件学习

ListView

前言

ListView组件是React Native中一个比较核心的组件，用途非常的广。该组件设计用来高效的展示垂直滚动的数据列表。最简单的API就是创建一个ListView.DataSource对象，同时给该对象传入一个简单的数据集合。并且使用数据源(data source)实例化一个ListView组件,定义一个renderRow回调方法(该方法的参数是一个数组)，该renderRow方法会返回一个可渲染的组件(该就是列表的每一行的item)

实例

高级特性

ListView每一行的点击方法需要在构造函数里面绑定

http://ju.outofmemory.cn/entry/240218

【React Native开发】React Native控件之View视图讲解

http://www.aichengxu.com/view/24616

基本属性方法

row:{ flexDirection:'column', justifyContent:'center', padding:10, backgroundColor:'#FFF', height:320, margin:10, },

onMoveShouldSetResponder， onMoveShouldSetResponderCapture, onPresponderGrant, onResponderMove, onResponderReject, onResponderRelease, onResponderTerminate,

onResponderTerminationRequest, onStartShouldSetResponder,

onStartShouldSetResponderCapture,

pointerEventsenum('box-none', 'none', 'box-only', 'auto')(触摸事件是否可

以进行穿透控件View);

http://blog.csdn.net/developer_jiangqq/article/details/500718

ViewPaper

基本属性方法

constructor(props){ super(props);

vardataSource=newViewPager.DataSource({ pageHasChanged:(p1, p2)=> p1 !== p2, });

this.state={

dataSource:dataSource.cloneWithPages(BANNER_IMGS) }

}

_renderPage(data,pageID){ return(

); }

render(){

return( style={{height:130}} dataSource={this.state.dataSource} renderPage={this._renderPage} isLoop={true} autoPlay={true} /> ); }

http://www.2cto.com/kf/201511/451863.html

Image

resizeModeenum('cover', 'contain', 'stretch') 决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。 cover: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全覆盖甚至超出容器，容器中不留任何空白。 contain: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全被包裹在容器中，容器中可能留有空白 stretch: 拉伸图片且不维持宽高比，直到宽高都刚好填满容器 InputText

详情参考：http://blog.csdn.net/developer_jiangqq/article/details/505570

iOS表单处理控件tcomb-form-native

tcomb-form-native 是 React Native 强大的表单处理控件，支持 JSON 模式，可插拔的外观和感觉。

摄像机视图 react-native-camera

react-native-camera 是 React Native 的摄像头 viewport。这个模块应用于开发的早期阶段，它支持摄像头的转换和基本图片捕捉。

var React = require('react-native'); var{

AppRegistry, StyleSheet, Text, View, }= React;

var Camera = require('react-native-camera');

varcameraApp=React.createClass({ render:function(){ return(

ref=\"cam\"

aspect=\"Stretch\"

orientation=\"PortraitUpsideDown\" style={{height:200, width:200}} />

); },

_switchCamera:function(){ this.refs.cam.switch(); } });

AppRegistry.registerComponent('cameraApp',()=>cameraApp); react-native-video

react-native-video 是

导航控件 react-native-navbar

React Native 轮播控件 react-native-carousel

var Carousel = require('react-native-carousel'); varExampleProject=React.createClass({ render(){ return( ); } });

下拉刷新组件 react-native-refreshable-listview

react-native-refreshable-listview 是下拉刷新ListView，当数据重载的时候显示加载提示。

Modal 组件 react-native-modal

react-native-modal 是 React Native 的 组件。

文本解析控件 react-native-htmltext

react-native-htmlview

react-native-htmlview 是一个将 HTML 目录作为本地视图的控件，其风格可以定制

LinearGradient组件 react-native-linear-gradient

react-native-linear-gradient 是一个 React Native 的LinearGradient组件

双向循环播放 react-native-looped-carousel

react-native-looped-carousel 是基于 React Native 的双向循环播放控件。 http://www.imooc.com/article/2223

react-native-popuwindow

参考：https://github.com/beefe/react-native-popupwindow Button

{this.props.text}

Jquerydatatable 1. Datatable的基本用法

http://www.tuicool.com/articles/NBBnum 2.