React Native-04:使用弹性布局

本文展示了如何使用React Native的View组件,通过设置flex属性和justifyContent、alignItems属性,实现三个元素水平排列且均匀分布,并保持竖直居中。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

设置三个元素 水平排列 水平平均分布 竖直居中

import React, { Component } from 'react'
import { View } from 'react-native'

export default class App extends Component
{
    render ()
    {
        return (
            // 设置三个元素 水平排列 水平平均分布 竖直居中
            <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                <View style={{ width: 50, height: 50, backgroundColor: 'pink' }} />
                <View style={{ width: 50, height: 50, backgroundColor: 'blue' }} />
                <View style={{ width: 50, height: 50, backgroundColor: 'yellow' }} />
            </View>
        )
    }
}