用户登录

默认 1 ,2,3 这几个项目都会堆叠到一块儿靠着屏幕的最上面显示 .. 在这个包装它们的 container 里面 .. 添加一个 justifyContent .. 它的值默认应该是 flex-start … 再把它设置成 center .. 这些项目在垂直居中显示在屏幕上 … 靠屏幕的底部显示,可以把这个值修改成 flex-end ..

在屏幕上还有很大一块儿空白的地方, 我们可以把这块地方平均分一下,放到每个项目之间 .. 把 justifyContent 的值设置成 space-between …

或者,也可以设置成 space-around ..

1,2,3 这几个项目默认的宽度就是整个屏幕的宽度 .. 这是因为它们的包装容器的 alignItems 这个属性默认的值是 stretch .. 在这个 container 里面,添加一个 alignItems .. 把它的值设置成 flex-start … 这样这些项目会靠着左边显示 .. 居中,可以设置成 center … 靠屏幕的右边显示,可以使用一个 flex-end ..

我们也可以单独控制每个项目的对齐方式 … 比如我想让 项目1 在屏幕左边显示 .. 找到 itemOne .. 在它里面用一个 alignSelf … 它的值设置成 flex-start ..

再修改一下 itemTwo 的 alignSelf 的值 … 把它设置成 center .. 现在 itemThree ,项目 3 的对齐方式就是在它的包装 container 里面用 alignItems 设置的 flex-end ..

再去掉这些样式 ..

现在我想让屏幕上的这三个项目平均分成几份 .. 在这个 item 样式里面,可以用一个 flex 属性,把它的值设置成 1 .. 这样会把刚才剩下的空间平均分一下,放到每个项目里面。

如果你想让某个项目多占点地方,可以单独去设置一下它的 flex 属性 .. 在这个 itemThree 的上面,用一个 flex .. 它的值设置成一个比 1 大的数 .. 比如设置成 2 ..

你会看到,现在 项目3 占的地方会比另外两个项目大一些 ..

现在这几个项目是堆叠在一块儿显示的 .. 我们可以让它们并排显示 .. 在这个 container 上面,添加一个 flexDirection .. 设置一下方向,默认它的值是 column … 这里我们把它设置成 row … 现在,这几个项目会并排显示 ..

你也可以使用刚才介绍的那些属性 .. 比如在 项目 2 的上面,把 alignSelf 的值设置成 'flex-end’ ..

布局 - Flexbox《 React Native #1 》

统计

11889
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点