烦恼一般都是想太多了。

0%

React-Native使用Flex来进行布局

React Native 官方已经推荐使用 expo 来进行项目的开发了,但是国内使用的话还有几个非常猥琐的问题。一个就是项目的初始化很慢,还有就是要进行模拟器运行的时候,客户端下载非常的慢。不过推荐得用不是。

至于为什么用 RN,这又是另外一个话题了。场景是需要为一个 MUD 游戏做一个图形界面来,降低上手的难度。这样的话实际上就只是文字和一些文字框的游戏。开始是准备用比较属性的 Cocos Creator,不过感觉用来做 MUD 的客户端还是有点重了。另外就是其对于 UI 控件的实现是自己用 C 在底层实现的,实际上非常的不好用。

另外,还有点比较好的就是,RN 可以像网页那样用 Flex 进行布局,就容易多了。

项目建立

实际上,在官方的文档中,使用 expo 的步骤非常简单:

npm install -g expo-cli
expo init AwesomeProject

cd AwesomeProject
npm start # you ca

然后就可以在浏览器中进行我们的操作进行启动模拟器等了。

问题

项目初始化和在模拟器上运行很慢,这个其实我挂了梯子就好了?梯子的问题?

编辑器

没法了,使用 vscode 吧,用官方推荐的 atom 加上 https://nuclide.io/ ,居然找不到这个插件,那就算了吧。

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-aroundspace-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 绝对位置

注意事项