iOS 混合开发 —— reactNative

一、reactNative 的文档

reactNative中文官网     http://reactnative.cn/

 

免费教学视频 ：

CSDN 蓝鸥培训视频： http://edu.csdn.net/course/detail/3129/52501?auto_start=1

 

搭建好运行环境就可以 创建我们的 RN 应用：(命令行里面 cd 到想创建工程的文件夹)

react-native init RNApp --version 0.44.3

 

 

js 里面写个 hellp word 看看 RN 究竟是什么东东。

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

// 注意，这里用引号括起来的'HelloWorldApp'必须和你init创建的项目名一致
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

　　

那这段代码是什么意思呢？

　　初看这段代码，可能觉得并不像JavaScript--没错，这是“未来”的JavaScript的。

　　首先你需要了解ES2015（也叫作ES6） - 这是一套对JavaScript的语法改进的官方标准。但是这套标准目前还没有在所有的浏览器上完整实现，所以目前而言web开发中还很少使用.React原生内置了对ES2015标准的支持，你可以放心使用而无需担心兼容性问题。上面的示例代码中的import， ，from，class，extends以及() =>箭头函数等新语法都是ES2015中的特性。如果你不熟悉ES2015的话，看看可以阮一峰老师的书，论坛还有的这篇总结。

　　示例的这一行<Text>Hello world!</Text>恐怕很多最人看起来也。觉得陌生。这叫做JSX--是一种在JavaScript的中嵌入XML结构的语法。很多传统的应用框架会设计自有的模板语法，让你在结构标记中嵌入代码.React反其道而行之，设计的JSX语法却是让你在代码中嵌入结构标记。初看起来，这种写法很像网络上的HTML，只不过使用的并不是网络上常见的标签如<div>或是<span>等，这里我们使用的是React Native的组件。上面的示例代码中，使用的是内置的<Text>组件，它专门用来显示文本。

 

组件与AppRegistry 

上一个代码定义了一个名为HelloWorldApp的新的组件（Component），并且使用了名为AppRegistry的内置模块进行了“注册”操作。你在编写React Native应用时，肯定会写出很多新的组件。而一个App的最终界面，其实也就是各式各样的组件的组合组件本身结构可以非常简单-必须唯一就是的在render方法中报道查看一些用于渲染结构的JSX语句。

AppRegistry模块是用来告知React Native哪一个组件被注册为整个应用的根容器你无需在AppRegistry.registerComponent这个深度，因为一般在整个应用中这个方法只会调用一次上面的代码里已经包含了具体的用法，只需你复制整个到index.ios.js或是index.android.js文件中即可运行。

 

二、reactNative 的见解：

1、传统的HybridApp开发方式，它们的原理其实就是在一个运行在Webview中的app，只不过这个Webview比较特殊而已。

2、React Native 完全不是这样！不算是一种传统的HybirdApp开发方式

3、React Native 是最终还是会把你写的代码转换成原生的代码进行编译。这就意味着RN开发出来的APP是无限逼近原生APP的性能的。

 

 

 【参考资料】

   https://github.com/reactnativecn/react-native-guide

 

 

github地址: https://github.com/lc081200/hybirdApp