/**

1. reactNative  反应式语言

2. 既拥有原生的用户体验,又保留React的开发效率

3. FaceBook研究

H5,Android,iOS

4. BAT的插件化,热修改  2015/9/15

主流React Native 技术比较有效

Android版本稳定更加火爆

可以使用javaScript和React跨平台开发

learn once,write everywhere(最具有魅力)

Web/iOS/Android -》Virtual DOM -> React(JS/JSX)对iOS底层组建进行包装,运行时系统

React Native提倡组件化开发,即提供一个个封装号的组件,组件相互嵌套形成新的组件。

追去极致的用户体验,实时的热部署

运行时和虚拟DOM对iOS底层进行了包装

5. support platform

iOS7,Android 4.1

6. 版本更新速度快,没有身后的javaScript基础,

a.功能 适中,交互一般

7. 配置环境

Homebrew 是一个资源管理器包,OS X的套件

ruby...

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)

*/

/**

基本语法

1. jScript是由 ECMScript,javaScript和jScript

ES5, 最新ES6(某些浏览器不支持)

2. react Native中任何一个类可以通过注册一个组件,面向组件编程,任何一个类都能够通过组件进行注册.

2.1 从react框架中注册组件,这是一个固定的格式写法。 import为导入头文件,{标示需要注册的类型

import Rect, { Compoment } from 'react';

2.2 对组册的组件 compoment样式的详细描述。指定需要注册哪些组件。

import {     //注册组件的类型

AppRegistry, //注册

StyleSheet,  //样式

Text,        //文本组件

View,        //视图组件

Image        //图像组件

TextInput,   //输入框的组件

} from 'react-native';

3. react native中类的定义

//定义了一个类,它的类型为一个组件

class AHelloWorld extends Component {

//初始化方法,通过  render(){ } 对该组件进行渲染。

render(){   //相当于OC中的ViewDidLoad方法,加载视图

//通过return返回, 采用return(); 返回一个布局好的视图, 视图定义在()内。

return (

<View style={styles.container}>

<Text style={styles.weclome}>您号世界,</Text>

<Text style={styles.instuctions}> to get started,edit index.ios.js</Text>

<Text style={styles.instuctions}> Press Cmd+R to reload,{\'n'} Cmd + D or shake for dec menu </Text>

</View>

);

}

}

上述事例行中 <Text>Hello world!</Text>  在javaScript中嵌入的XML结构的语法,键程

//定义外部样式变量 ({代码块})    备注 ({})代表了一个封闭的代码块,在OC中为了将一个方法内部的实现拆分也可以使用此方法。这个代码快里可以简单的理解为一组模型对象,通过styles. 语法获取对应的对象。 当视图属性加载的时候会从对应的对象中以KVC的方式读区对应的value给视图设置响应的外观属性。有点点类似于HTLML5

const styles = StyleSheet.create({

container:{

flex:1,

jstifyContent:'center',

alignItems:'center',

backgroundColor:'#F5FCFF'

},

weclome: {

fontSize:20,

textAlign:'center',

color:"#3333333",

marginBottom:5,

}

instructions: {

}

})

// 注意,这里用引号括起来的'HelloWorldApp'必须和你init创建的项目名一致

AppRegistry.registerComponet('AHelloWorld',() => AhelloWorld);

*/

/**

1.初始化项目

> cd iOS项目名称

react-native init BViewDemo

> 在appDleage中定义

//下面定义了一个jsCode的路径,我们可以将自己写的代码放在app本地通过bundle加载,也可以将其放在服务器端,通过联网后远程加载,这样既能够不占用app内存,同时也方便实时的进行热部署。通常这个方法都写在app didLaunchWithOptions方法中。这样便于程序启动的时候直接跳转到我们的react Native页面

NSURL jsCodeLocation = [NSURL URLWithString:@"htpp://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

RCTRootView* rootView = [RCTRootView alloc]initWithBundleURL:jsCodeLocaiton numduleName:@"BViewDemo initialProperties:nil launchOptions:lanchOptions"];

self.window.rootViewController = [UIViewController new];

2. JSX和组件的核心理念

React的核心机制是虚拟DOM(Document Object Model),可以在内存中创建虚拟的DOM元素,React利用虚拟DOM来减少DOM的操作从而提升性能,传统的创建方法 。

var newBox = docment.creatElement('div');

newBox.className = 'box';

$('main').appendChild(newBox);

var newPic = document.createElement('div');

newPic.className = 'pic';

newBox.appendChild(newpic);

var newImg = doucment.createElement('img');

new.src = 'images/' + data.img[i].src;

newPic.appendChild(newImg);

var root=(

<div className="box">

<div className="pic">

<img src = "images/1.jpg"/>

</div>

</div>

);

3.View组件中常用的属性

UIView, android.view,或者网页中<div></div>组件, 左边列举项都代表着视图。

Flexbox:弹性布局组件

Transforms:动画属性

backfraceVisibility,,定义页面反转是否可见

elevation. 是否显示立体高度

*/

4. 组件与AppRegistery

上述代码中定义了一个名为HelloWorlApp的新的组件(component),并且使用了AppRegistry的内置模块进行了注册操作,在编写ReactNative应用时,肯定会写出很多新的组件.而App的最终界面,也其实就是各种样式的组合,组件本省的机构可以非常简单,惟一必须就是在render方法中返回一些用于渲染结构的jxs语句。

AppRegistry模块则是告诉ReactNative哪一个组件被注册为整个应用程序的根容器,你无须在此深究,因为一般在整个应用里AppRegistry.registerComponent这个方法只会调用一次,上面的代码已经包涵了具体的用法. 只需要将文件中的代码复制到index.ios.js或者index.android.js文件中运行。

1. ReactNative 基础的更多相关文章

  1. React-Native基础教程

    React-Native牛刀小试仿京东砍啊砍砍到你手软 React-Native基础教程 *React-Native基础篇作者git *React-Native官方文档 *Demo 几个月前faceb ...

  2. ReactNative 基础学习

    安卓Back键的处理·基本+高级篇 http://bbs.reactnative.cn/topic/480/%E5%AE%89%E5%8D%93back%E9%94%AE%E7%9A%84%E5%A4 ...

  3. reactNative 基础

    参考:中文网,极客 一 . 基本程序: import React, { Component } from 'react'; import { Text } from 'react-native'; e ...

  4. react-native 基础知识的学习

    react已经用了半年多了,年后有时间想探究一下奇妙的react-native,还别说确实刁,具体哪里刁后面会补充,因为搭建教程,以及入门教程没来得及写,这里先来写一些基础知识的心得. 为什么reac ...

  5. React-Native基础-安卓篇(二)

    前言:这一篇随笔将记录我在React-Native官网文档上学习的基础知识

  6. react-native基础教程(1)

    转载链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-foundation-course/ React ...

  7. React-Native基础_5.列表视图ListView 网络数据展示

    //获取网络数据 并用列表展示 豆瓣Top250 api /** * Sample React Native App * https://github.com/facebook/react-nativ ...

  8. React-Native基础_5.列表视图ListView

    列表视图ListView 用来显示垂直滚动列表,需要指定两个东西,1 数据的来源 dataSource,2 渲染列表的条目布局 rendRow 'use strict' import React, { ...

  9. React-Native基础_4.View组件

    View组件 对应ios 的UIView android 中的view 使用要先导入View import { View } from 'react-native'; 使用就是View标签,可以添加S ...

随机推荐

  1. 详解一个自己原创的正则匹配IP的表达式

    这里给大家详细讲解一下一个匹配IP地址的正则表达式, 有关正则方面的知识,会在详细的讲解中提到. 在讲解之前,我先给大家介绍一下,ip地址的生成规则. IP地址,是由32位数字二进制转为四个十进制的字 ...

  2. EasyUI树和Ztree树冲突问题

    1.今天做项目的时候出现了如下的错误. 报错:TypeError: $(...).tree is not a function 代码如下: 这是EasyUI的页面部分 $(function(){ $( ...

  3. php字符截取

    mb_substr($str,0,2) 0 索引的位置  2 长度 mb_substr($str,0,-1) 最后一位如果是负数 表示从前面0开始到后面-1 0,-1都是索引

  4. Q的深层嵌套

    1.如果将异步方法用同步的方式执行,try catch能捕获到错误,同时不会阻塞到主进程,因此console.log(3333)能执行. var fs = require('fs'); try { v ...

  5. C#实现XML与DataTable互转

    private string ConvertDataTableToXML(DataTable xmlDS) { MemoryStream stream = null; XmlTextWriter wr ...

  6. iOS -Swift 3.0 -for(循环语句用法)

    // // ViewController.swift // Swift-循环语句 // // Created by luorende on 16/12/08. // Copyright © 2016年 ...

  7. powershell

    function 怎么执行: http://www.cnblogs.com/bradwarden/p/3370260.html PowerShell script can be used in: 1. ...

  8. Android驱动开发前的准备

    最近看了一些Android驱动开发前需要知道的资料,收获很多,接下来就谈谈我自己的一些心得体会. Android在近几年时间发展迅速,已经成为智能手机操作系统的老大.不过,因为Android原生的代码 ...

  9. c#-SimHash匹配相似-算法

    使用场景:Google 的 simhash 算法 //通过大量测试,simhash用于比较大文本,比如500字以上效果都还蛮好,距离小于3的基本都是相似,误判率也比较低. //从我的经验,如果我们假定 ...

  10. gTest详解

    1. 安装使用 1.1 安装 在https://code.google.com/p/googletest/ 下载源码 进入msvc, 注意编译方式, 如果是dll, 选择 gtest-md 编译生成l ...