个人博客搭建完成，欢迎大家来访问哦
黎默丶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。
网友评论