RN中的子绝父相(水平垂直居中)

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

export default function Index() {
  return (
    <>
      <View style={styles.container}>
        <Text style={styles.item}>我是水平垂直居中的元素</Text>
      </View>

      <View style={styles.container}>
        <Text style={styles.item2}>我是水平居中,垂直方向为0的元素</Text>
      </View>

      <View style={styles.container}>
        <Text style={styles.item3}>我是垂直居中,水平方向为0的元素</Text>
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    width: 200,
    height: 200,
    backgroundColor: 'blue',
    position: 'relative',
    marginTop:20
  },
  // 水平垂直居中
  item: {
    position: 'absolute',
    width: 100, // 子元素宽度
    height: 50, // 子元素高度
    top: '50%', // 父元素高度的一半距离
    left: '50%', // 父元素宽度的一半距离
    transform: [
      {translateX: -50}, // 子元素宽度的一半
      {translateY: -25}, // 子元素高度的一半
    ],
    backgroundColor:"pink"
  },
  // 水平居中
  item2: {
    position: 'absolute',
    width: 100, // 子元素宽度
    height: 50, // 子元素高度
    top: 0,
    left: '50%', // 父元素宽度的一半距离
    transform: [{translateX: -50}], // 子元素宽度的一半
    backgroundColor:"red"
  },
  // 垂直居中
  item3: {
    position: 'absolute',
    width: 100, // 子元素宽度
    height: 50, // 子元素高度
    top: '50%', // 父元素高度的一半距离
    left: 0,
    transform: [{translateY: -25}], // 子元素高度的一半
    backgroundColor:"orange"
  },
});

效果图