react native 各种居中

最新推荐文章于 2022-06-08 11:33:08 发布

转载最新推荐文章于 2022-06-08 11:33:08 发布 · 1.4k 阅读

文章标签：

#react native 各种居中

移动web 同时被 3 个专栏收录

15 篇文章

订阅专栏

webapp

11 篇文章

订阅专栏

react

6 篇文章

订阅专栏

本文通过一个React Native实例展示了如何使用Flexbox布局实现文本在不同视图中的水平居中、垂直居中及同时水平垂直居中的效果。代码示例中包含了三个不同的View组件，分别演示了这些布局技巧。

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

export default class Demo13Component extends Component{
    render(){
        return (
            <View>
                <View style={{height:100,width:100,backgroundColor:'#eee',alignItems:'center'}}>
                    <Text>水平居中</Text>
                </View>
                <View style={{height:100,width:100,backgroundColor:'green',justifyContent:'center'}}>
                    <Text>垂直居中</Text>
                </View>
                <View style={{height:100,width:100,backgroundColor:'red',alignItems:'center',justifyContent:'center'}}>
                    <Text>水平垂直居中</Text>
                </View>
            </View>
        )
    }
}