1. ReactNative 基础
/**
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 基础的更多相关文章
- React-Native基础教程
React-Native牛刀小试仿京东砍啊砍砍到你手软 React-Native基础教程 *React-Native基础篇作者git *React-Native官方文档 *Demo 几个月前faceb ...
- ReactNative 基础学习
安卓Back键的处理·基本+高级篇 http://bbs.reactnative.cn/topic/480/%E5%AE%89%E5%8D%93back%E9%94%AE%E7%9A%84%E5%A4 ...
- reactNative 基础
参考:中文网,极客 一 . 基本程序: import React, { Component } from 'react'; import { Text } from 'react-native'; e ...
- react-native 基础知识的学习
react已经用了半年多了,年后有时间想探究一下奇妙的react-native,还别说确实刁,具体哪里刁后面会补充,因为搭建教程,以及入门教程没来得及写,这里先来写一些基础知识的心得. 为什么reac ...
- React-Native基础-安卓篇(二)
前言:这一篇随笔将记录我在React-Native官网文档上学习的基础知识
- react-native基础教程(1)
转载链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-foundation-course/ React ...
- React-Native基础_5.列表视图ListView 网络数据展示
//获取网络数据 并用列表展示 豆瓣Top250 api /** * Sample React Native App * https://github.com/facebook/react-nativ ...
- React-Native基础_5.列表视图ListView
列表视图ListView 用来显示垂直滚动列表,需要指定两个东西,1 数据的来源 dataSource,2 渲染列表的条目布局 rendRow 'use strict' import React, { ...
- React-Native基础_4.View组件
View组件 对应ios 的UIView android 中的view 使用要先导入View import { View } from 'react-native'; 使用就是View标签,可以添加S ...
随机推荐
- 替换jenkins上打包完成的安装包的方法
修改 /root/.jenkins/jobs/Item名称/lastSuccessful/archive/*/obj 文件夹下的文件,就可以在下图二中下载新修改的文件,需要注意的是,此文件夹下不能有新 ...
- java基础类型、包装器
char a = 'h'; //类包装器 Character aobj = a ;//自动装箱 byte b = 6; Byte bobj = b; short s = 234; Short sob ...
- rhel 7.0 配置centos yum源(2016/12/8),成功!
1.首先查看redhat 7.0系统本身所安装的那些yum 软件包: rpm -qa | grep yum #列出所有已安装的yum包 2.删除这些包: rpm -e *.rpm --nodeps # ...
- Linux环境数据备份Python脚本
#!/usr/bin/python#Filename:backupscript.pyimport osimport time # The files and directories to be bac ...
- HUD 5050 Divided Land
http://acm.hdu.edu.cn/showproblem.php?pid=5050 题目大意: 给定一个矩形的长和宽,把这个矩形分成若干相等的正方形,没有剩余.求正方形的边长最长是多少. 解 ...
- REM 布局
1.rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位 2.为什么web app要使用rem? 实现强大的屏幕适配布局(淘宝,腾讯,网 ...
- csuoj 1119: Collecting Coins
http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1119 1119: Collecting Coins Time Limit: 3 Sec Memo ...
- 简化C语言文法
程序 → 外部声明|程序 外部声明 外部声明 → 定义函数|定义 函数定义 → 类型标识符 声明部分语句 类型标识符 → 空类型|字符型|整型|浮点型 声明部分语句 → 指针 直接声明|直接声明 指针 ...
- Android touch 事件传递机制
前言: (1)在自定义view的时候经常会遇到事件拦截处理,比如在侧滑菜单的时候,我们希望在侧滑菜单里面有listview控件,但是我们希望既能左右滑动又能上下滑动,这个时候就需要对触摸的touch事 ...
- unresolved inclusion in the java header in JNI
eclipse的ndk开发环境建差不多后打开jni的samples里的hello-jni项目.添加native和运行都没有问题,但是打开hello-jni.c看到一片红: 光这一个文件牵涉的问题有下面 ...