react-native 创建 ios 项目

创建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。