React-Native入门
React-Native入门(文档http://reactnative.cn/docs/getting-started.html#content): 一、React-Native 环境配置: 1.参考文档:http://www.csdn.net/article/2015-09-24/2825787-react-native;2.安装三个东西:node(4.0以上)/watchman/flow 安装node命令:brew install node安装watchman命令: brew install watchman安装flow命令: brew install flow 3.安装react-native命令: npm install -g react-native-cli iOS端:1.安装Xcode7.0或更高版本 android端:1.安装最新版的JDK:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html; Mac,往你的~/.bashrc,~/.bash_profile 或者你终端所用的其它配置文件中增加以下内容: # 如果你是通过Homebrew安装SDK的,则加入下列路 径 4.打开sdk manager,install以下条目: 5.安装genymotion模拟器6.安装androidStudio 二、初始化RN项目: 1.打开终端进入到你想放置RN项目的目录,执行命令:react-native init 项目名,此时会进入下载react-native的node-modules包,会等很久;所以有个方法跳过此步骤: 1.打开终端,执行:open /usr/local/lib/node_modules/react-native-cli/index.js 2.在打开的文件中注释掉以下内容: 3.再执行命令:react-native init 项目名,此时会报错:Error: Cannot find module;因为少了react-native的node-modules包,可以从百宝箱下载这个包放到项目名的目 录下: 注:百宝箱地址:http://10.20.18.148/desktop/index.php?user/login 用户名:anydoor;密码: anydoor123;可以用搜索功能找到node_modules; 4.在项目的上级目录下执行:react-native init 项目名,选择y,项目就可以生成了。 5.运行项目:1)iOS端直接打开iOS目录下的工程;iOS 真机调 试也简单,修改HTTP地址即可:jsCodeLocation =[NSURL URLWithString:@"http://localhost:8081/ index.ios.bundle"]; 2)android端(需要下载gradle2.4和一些依赖,公司的网络不行): 1.(这种只需要一个模拟器)终端进入到项目的目录下,执行react-native run-android,在下载完依赖包后可以运行在模拟器上; 2.终端进入RN目录运行react-native start,通过androidstudio打开android项目,运行就可以; 3.真机调试时无法连接到debug server:1)5.0或以上机型,通过adb反向代理端又:adb reversetcp:8081 tcp:8081,再打开服务。 三、进行RN开发: 1.组件思想:1)创建组件: var React = require(‘react-native’); 2)组件的生命周期:当通过调用React.createClass( ) 来创建组件的时候,应该提供一个包含 render 方法的对象,并且也可以包含其它的生命周期 方法。 3)组件的props和state:props:指的是组件的属性,是一个对象。可用 于组件之间的数据传递。state:是组件的状态,当state发生变化时组件 会重新渲染。this.state.key-value;4)常用组件:view/text/listview/ touchableHighlight等 2. JSX:类似于html,不同点在于JSX可以执行js。JSX在render函数中编辑,长得像一颗组件树。render函数中只能渲染一个根组件。 3.flex布局:可以参考http://139.196.14.76/t/react-native-flex/181 Flex布局与Android的线性布局(LinearLayout)有点类似,都可以设置布局方向,对齐方式,以及项目的布局占位权重。flex布局中容器默认有两个轴:主轴(水平)和交叉轴(垂直);项目(组件)默认是沿交叉轴排布。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |