React Native 官方已经推荐使用 expo 来进行项目的开发了,但是国内使用的话还有几个非常猥琐的问题。一个就是项目的初始化很慢,还有就是要进行模拟器运行的时候,客户端下载非常的慢。不过推荐得用不是。
至于为什么用 RN,这又是另外一个话题了。场景是需要为一个 MUD 游戏做一个图形界面来,降低上手的难度。这样的话实际上就只是文字和一些文字框的游戏。开始是准备用比较属性的 Cocos Creator,不过感觉用来做 MUD 的客户端还是有点重了。另外就是其对于 UI 控件的实现是自己用 C 在底层实现的,实际上非常的不好用。
另外,还有点比较好的就是,RN 可以像网页那样用 Flex 进行布局,就容易多了。
项目建立
实际上,在官方的文档中,使用 expo 的步骤非常简单:
npm install -g expo-cli |
然后就可以在浏览器中进行我们的操作进行启动模拟器等了。
Flex 布局
官方的定义是,FlexBox 是一个可以使用 Flex 算法来指定子视图的布局的组件。其设计的目的,是为了提供一个在不同屏幕尺寸间的一致性布局。
我们知道,我们的容器一般都是 View,所以我们只需要在 View 中指定 flex
就能使用其布局了。
轴
一般来说,定义了两个轴。横轴(row),纵轴(column)。Flex 所定义的行为就在两个轴上作用的。
属性列表
- flex:定义了当前视图如何在主轴上填充可用空间的。其是一个数值,定义了主轴上所占据空间的比例。有点类似与安卓中的
layout_weight
的意思,就是权重的概念。 - flexDirection:定义主轴的方向
row
左至右column
上至下(默认值)。row-reverse
从右至左。column-reverse
由底而上。
- justifyContent:在主轴方向是如何对排列子视图。
flex-start
从开始对齐flex-end
从尾部开始space-between
子视图间的间隔距离相等进行排列center
居中space-around
与space-between
,不过这个在边界间也会计算相等的距离。space-evenly
这个和上个选项很相似,但是区别在哪里?
- alignItems:次轴如何排列子视图的。
stretch
拉伸子视图来填满容器的次轴的高度。不能设置子视图的高度为确切的数字flex-start
flex-end
center
baseline
。对准一个基线。
- alignSelf:改变子视图自身。
- alignContent:定义了次轴方向的行分布情况。这只会在使用了
flexWrap
来包装子视图多行的情况。。意思只有在子视图多行的情况生效。flex-start
flex-end
center
stretch
space-between
space-around
- flexWrap:作用于 主轴。控制当子视图超过了 主轴 的尺寸的时候怎么办 。默认情况下,子视图是被强制设置为一行的(这会让有些元素看不到)。如果允许转行的话,那么超过尺寸的那些元素就会放新的行上,包装起来,这个时候
alignContent
就会生效了。 - flexGrow
- flexShrink
- flexBasis
- width,height 宽高
auto
自动计算pixels
绝对值percentage
百分比
- position
relative
默认值absolute
绝对位置