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。