(1)需要一台Mac(OSX)
(2)在Mac上安装Xcode,建议Xcode 6.3以上版本
(3)安装node.js:https://nodejs.org/download/
(4)建议安装watchman,终端命令:brew install watchman
(5)安装flow:brew install flow
打开终端,开始React-Native开发的旅程吧。
(1)安装命令行工具:sudo npm install -g react-native-cli
(2)创建一个空项目:react-native init HelloWorld
(3)找到创建的HelloWorld项目,双击HelloWorld.xcodeproj即可在xcode中打开项目。xcodeproj是xcode的项目文件。
(4)在xcode中,使用快捷键cmd + R即可启动项目。基本的Xcode功能可以熟悉,比如模拟器的选择等。
启动完成后,你会看到React-Packger和iOS模拟器,具体的效果如下,说明你创建项目成功了。
如果项目中断 cd到项目根目录 执行
npm start
react-native run-ios 运行ios
1, 当一个(元素)组件,定义了flex属性时,表示该元素是可伸缩的。当然flex的属性值是大于0的时候才伸缩,其小于和等于0的时候不伸缩,例如:flex:0, flex:-1等。上面的代码,最外层的view是可伸缩的,因为没有兄弟节点和它抢占空间。里层是3个view,可以看到三个view的flex属性加起来是5+5+10=20,所以第一个view和第二个view分别占1/4伸缩空间, 最后一个view占据1/2空间
2,
flexDirection在React-Native中只有两个属性,一个是row(横向伸缩)和column(纵向伸缩)
3,
alignSelf的对齐方式主要有四种:flex-start 左边、 flex-end 右边、 center中间、 auto 自动、 stretch
alignItems
是alignSelf的变种,跟alignSelf的功能类似,可用于水平居中;
justifyContent用于垂直居中,属性较多