了解React-Native

个人博客搭建完成，欢迎大家来访问哦
黎默丶lymoo的博客

什么是React-Native

随着新的移动互联网的发展，这种能够跨平台混合开发已经成为了一种趋势，混合开发的人才需求越来越大，ReactNative是Facebook发布的一个能够进行混合开发的框架，通过ReactNative能同时为IOS和Android开发应用程序，使用ReactNative开发的应用程序，既保留了原生应用的性能，这种良好的人机交互的体验，又保留了ReactNative的良好的开发效率，它是把原生应用和Web应用的优点集一身。

React-Native的特点

性能媲美原生应用

由于React-Native提供的组件是对原生API的暴露。虽然我们是用js写的代码，但实际上调用的是原生API，原生的UI组件。体验上足以媲美原生应用。

开发效率高

相比于原生开发，js学习成本低、语法灵活。允许让Web开发者更多地基于现有经验开发App。

节约开发成本

百分之90多界面可以通过React-Native开发，一份代码同时可以适配Android和iOS。并通过一些手段自动匹配不同屏幕大小的手机，再也不需要自己去计算视图的大小和位置。

实时远程调试

React-Native的调试比Cordova不知道好到哪里去了。开启了实时重载之后，代码一改，app就自动更新成最新，对于UI的搭建简直是省了不少的编译时间。同时可以打开XCode实时的看到所有的 log信息。

代码热部署

我们知道AppStore审核流程超级久。而由于React-Native是用的js来写的代码，实时编译的过程能让我们实现应用像网页一样做到热更新，随时发布。真正能够做到上架审核一次，永久0审核更新。

缺点

加载慢，安装包大。

配置React-Native开发环境

具体的开发环境教程可以查看React-Native开发环境教程，上面有很详细的介绍。
主要就是安装一下最新版本的Xcode，Homebrew，node，Watchman，Flow等，并且要保证自己的8081端口没有被占用。

创建React-Native项目

打开终端输入react-native init ProjectName，这里的ProjectName可以改成你想创建的项目名称。然后有两种方法启动项目

1.从终端开启

在终端找到刚才创建的项目进入它的路径如cd ProjectName，之后启动它react-native run-ios即可。

2.从Xcode开启

在项目中找到以xcodeproj为后缀结尾的文件双击，即可在xcode打开项目，然后在xcode编辑器中点击启动按钮即可启动。

React-Native代码的执行逻辑

第一部分

导入reactNative包，以及必须组件。
AppRegistry:是通过Js运行reactNative应用的入口。
StyleSheet：ReactNative中的样式表，类似于css样式表。

第二部分

创建ReactNative组件，模板中使用的是ES6的语法

第三部分

通过StyleSheet.create()创建样式实例（在应用中只会创建一次，不用每次在渲染周期中创建）。

第四部分

注册入口组件AppRegistry：负责注册运行。
ReactNative应用的js入口。
registerComponent注册应用程序的入口组件，告知哪一个组件被注册为应用的根容器。

React-Native代码调试

common+R：重启项目
common+D：调取调试工具（如：热更新、js调试等）

React-Native的样式设置

样式可以分为外部样式和内联样式

外部样式

外部样式可以通过StyleSheet.create()进行创建，样式以对象形式展示。
例如：

const styles = StyleSheet.create({    container: {        flex: 1,        justifyContent: ‘center’,        alignItems: ‘center’,        backgroundColor: ‘cyan’    },    welcome: {        fontSize: 20,        textAlign: ‘center’,        margin: 10    },    instructions: {        textAlign: ‘center’,        color: ‘#333333’,        marginBottom: 5    }});

书写格式（与原生css的区别）

1、HTML中以”;”结尾，react以”,”结尾
2、HTML中key和value都不加引号，react中key必须使用驼峰命名法，value需要加引号
3、HTML中value是数值时，需要添加单位，react不需要，会自动适配

拼接样式

要设置多个样式的话需要用一个数组里面传递对象，在数组里面越往后面的优先级越高。
例如：

var LessonStyle = React.createClass({    render:function(){        return (            <View style={styles.container}>                <View style={[styles.top, styles.other, styles.common]}>            </View>                <View style={[styles.bottom, styles.common, styles.other]}>                </View>            </View>        )    }});

FlexBox布局

我们在React-Native中使用Flexbox规则来指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构。

弹性盒模型介绍

这里博主就不多做介绍了，网上有许多大神整理过它的相关资料，可以参考阮一峰的Flex布局教程来学习一下。

RN中FlexBox的用法介绍

1.React-Native里的FlexBox跟CSS3里的FlexBox属性名称写法不同，React-Native里全部是用驼峰式命名法。
2.React-Native里的FlexBox支持很有限，他是FlexBox的一个子集。
FlexBox布局一共要分三步：第一步父容器定义对其方式。第二部子项目放到父容器里面，子项目定义个性的定义方式。
flexDirection：“row” /“column”，定义FlexBox的排列顺序，React-Native里的默认排列是纵向排列的，

RN中的FlexBox与CSS中的FlexBox不同之处

flexDirection: React-Native中默认为flexDirection:’column’，在Web CSS中默认为flex-direction:’row’。
alignItems: React-Native中默认为alignItems:’stretch’，在Web CSS中默认align-items:’flex-start’。
flex: 相比Web CSS的flex接受多参数，如:flex: 2 2 10%;，但在 React-Native中flex只接受一个参数。
不支持属性：align-content，flex-basis，order，flex-basis，flex-flow，flex-grow，flex-shrink。

原文链接