技术控

    今日:6| 主题:49390
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] 基础篇章:React Native之Flexbox的讲解(Height and Width)

[复制链接]
我宣你 发表于 2016-10-2 20:13:37
258 7

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
今天在讲解Flexbox之前,我们先讲解一下高度和宽度的问题。因为Height and Width的问题很简单,就不单独写一篇文章了。顺带说一下即可。
  Height and Width

  一个组件的高度和宽度,决定了它在屏幕上显示的大小。
  固定尺寸

  最简单的设置组件的尺寸的方法就是通过添加一个固定的宽度和高度。所有尺寸大小在React Native没有单位的,代表着独立的像素密度。
  官网例子

         [code]import React, { Component } from 'react';import { AppRegistry, View } from 'react-native';class FixedDimensionsBasics extends Component {  render() {    return (                                        );  }};AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);[/code]          效果图:
   
基础篇章:React Native之Flexbox的讲解(Height and Width)-1 (效果图,return,import,style,文章)
    这样设置尺寸大小的方式,比较适合于要求不同的屏幕上显示相同大小的View或者组件。写固定的尺寸大小,死值。
  弹性宽高

   我们可以在组件样式中使用flex让组件根据可用空间动态的收缩和扩展。通常情况下我们可以使用 flex: 1 ,告诉某个组件来填充剩余的所有的空间,如果是多个组件的话,则是所有的这些组件去平分父容器中的剩余的所有空间。。如果这些并列的子组件的flex值不一样,则谁的值更大,谁占据剩余空间的比例就更大(跟我们android中weight的用法差不多)。
  官网例子

         [code]import React, { Component } from 'react';import { AppRegistry, View } from 'react-native';class FlexDimensionsBasics extends Component {  render() {    return (      // Try removing the `flex: 1` on the parent View.      // The parent will not have dimensions, so the children can't expand.      // What if you add `height: 300` instead of `flex: 1`?                                        );  }};AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);[/code]          效果图:

基础篇章:React Native之Flexbox的讲解(Height and Width)-2 (效果图,return,import,style,文章)
       关于高度和宽度就讲这些吧,其实内容都是翻译与官网的docs,地址:
   https://facebook.github.io/react-native/docs/height-and-width.html#height-and-width    Flexbox

  一个组件可以使用Flexbox指定其子组件或元素之间的布局。Flexbox旨在为不同的屏幕上提供一致的布局。
  通常情况下,我们结合使用flexDirection、alignItems和 justifyContent三个样式属性就已经能够实现我们所需的布局。
  注意:Flexbox在React Native的工作原理和使用方式与css在web上的方式基本一样,当然也有一些例外:比如flexDirection的默认值是column而不是row,alignItems的默认值是stretch而不是flex-start,以及flex只能指定一个数字值。
  Flex Direction

  向一个组件的样式中添加Flex Direction可以决定一个布局的主轴。子元素应该沿着水平方向(row)排列,还是沿着竖直方向(column)排列呢?默认值是竖直(column)方向。
  官网例子

         [code]import React, { Component } from 'react';import { AppRegistry, View } from 'react-native';class FlexDirectionBasics extends Component {  render() {    return (      // Try setting `flexDirection` to `column`.                                        );  }};AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);[/code]          效果图:
123下一页
友荐云推荐




上一篇:css之display
下一篇:css之position
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

mintianv 发表于 2016-10-3 00:54:18
一个人快活,两个人生活,三个人就是你死我活。
回复 支持 反对

使用道具 举报

默许流年っ 发表于 2016-10-10 11:14:25
好帖子!
回复 支持 反对

使用道具 举报

chanchiukwan 发表于 2016-10-18 13:32:01
这么强,支持楼主,佩服
回复 支持 反对

使用道具 举报

加快看看 发表于 2016-11-4 16:03:53
你瞧你吧!看背影急煞千军万马,转过头吓退百万雄狮。
回复 支持 反对

使用道具 举报

萝莉 发表于 2016-11-8 09:52:51
楼主的头像是本人吗?
回复 支持 反对

使用道具 举报

无需楚楚可怜 发表于 2016-11-9 15:58:59
前排顶,很好!
回复 支持 反对

使用道具 举报

ζ扯蛋的夏天 发表于 2016-11-16 16:12:36
找不到恐龙,就用蜥蜴顶  
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表