ReactNative 中的flex,justifyContent和alignItems

ReactNative中的flex布局和CSS中的差不多说一下justifyContentalignItems的理解。这两个属性都是跟flexDirectionrowcolumn有关的,离开这两个属性说没有意义。在iOS中的坐标有X和Y轴,以便定位控件的位置,这两个属性可以把row对应成水平方向的X轴,column就是Y轴。
flexDirection就是决定X和Y哪个是主轴,那么子控件就按哪个方向排列。
justifyContent始终是以主轴为标准,alignItems以次轴为标准排列子元素。
例如row为主轴,效果就是x轴右对齐,y轴居中对齐。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React,{Component } from 'react';
import {Text,Image,View,AppRegistry,StyleSheet} from 'react-native';



export default class LostOfStyle extends Component {
  render(){
    return (
        <View style={{
          flex:1,
          flexDirection:'row',
          justifyContent:'flex-start',
          alignItems:'center',
        }}>
          <Text style={{width:100,backgroundColor: 'powderblue'}}>this is a blue</Text>

        </View>
      );
  }
}

这里写图片描述

### 如何在 React Native 中使用 Flex 布局进行组件排版 #### 使用 `flexDirection` 控制子元素排列方向 通过设置 `flexDirection` 属性可以控制容器内子元素的排列方式。默认情况下,子元素会按照列的方向垂直排列。如果希望水平排列,则需指定 `'row'` 方向[^1]。 ```javascript import React from 'react'; import { View, Text } from 'react-native'; const App = () => ( <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}> <Text>Item 1</Text> <Text>Item 2</Text> <Text>Item 3</Text> </View> ); export default App; ``` #### 利用 `justifyContent` `alignItems` 实现居中效果 为了使子元素能够在父级容器内部沿主轴交叉轴上居中显示,可以通过配置 `justifyContent` 及 `alignItems` 来达成目标。这两个属性分别对应于主轴上的分布以及侧轴上的对齐方式。 ```css { "container": { "flex": 1, "backgroundColor": "#fff", "padding": 8, "justifyContent": "center", /* 主轴 */ "alignItems": "center" /* 侧轴 */ } } ``` #### 设置 `flex` 定义弹性空间比例 当多个兄弟节点共享同一行或列的空间时,可通过赋予不同的 `flex` 数值来决定各自占据的比例大小。数值越大表示该元素相对其他同辈而言获得更多的可用宽度/高度。 ```jsx <View style={{ flexDirection: 'row' }}> <View style={{ backgroundColor: '#ffdddd', flex: 1 }} /> <View style={{ backgroundColor: '#ddffff', flex: 2 }} /> <View style={{ backgroundColor: '#ffeecc', flex: 3 }} /> </View> ``` #### 处理多行布局情况下的换行行为 对于超出单行长度的内容,默认不会自动折行而是继续延伸至屏幕之外。此时可借助 `flexWrap` 参数允许内容自然地分成多行展示,并保持原有的顺序不变。 ```css { "wrapper": { "display": "flex", "flexDirection": "row", "flexWrap": "wrap" } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值