React Native: Выровнять Абсолютный позиционированный Вид по левому / правому центру

Question

Я хочу создать компонент многократного использования, который можно прикрепить к любому краю родительского контейнера. Для справки см. Следующее изображение

Я не могу использовать flex для блоков, поскольку в родительском контейнере должно быть содержимое, отображаемое за ними

Я пробовал только выравнивание по левому краю, и это не работает так, как я хочу

// styles.js
import { StyleSheet } from 'react-native'
import { COLOR, BORDER_RADIUS } from 'app/constants'

export default StyleSheet.create({
  container: {
    alignItems: 'center',
  },
  box: {
    borderWidth: 1,
    borderColor: COLOR.grey_cl,
    borderRadius: BORDER_RADIUS.normal,
    backgroundColor: 'red',
  },
  boxTopAligned: {},
  boxRightAligned: {},
  boxBottomAligned: {},
  containerLeftAligned: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    flex: 1,
    alignItems: 'stretch',
    justifyContent: 'center',
  },
  boxLeftAligned: {
    textAlign: 'center',
    left: 0,
    transform: [{ rotate: '90deg' }],
  },
})

JSX

<View style={[[styles.container, styles.containerLeftAligned]]}>
  <View
    style={[
      HELPER_STYLES.paddingNormal,
      HELPER_STYLES.center,
      styles.box,
      styles.boxLeftAligned,
    ]}
  >
    <Text>{props.text}</Text>
  </View>
</View>

Что работает, но не совсем так, как я хочу

Answer 1

код

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

export default class Jojo extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={[[styles.container, styles.containerLeftAligned]]}>
          <View style={[styles.box, styles.boxLeftAligned]}>
            <Text>left</Text>
          </View>
        </View>

        <View style={[styles.box, styles.boxTopAligned]}>
          <Text>top</Text>
        </View>

        <View style={[[styles.container, styles.containerRightAligned]]}>
          <View style={[styles.box, styles.boxRightAligned]}>
            <Text>right</Text>
          </View>
        </View>

        <View style={[styles.box, styles.boxBottomAligned]}>
          <Text>bottom</Text>
        </View>
      </View>
    );
  }
}

стилей. js

container: {
    alignItems: 'center',   },   box: {
    borderWidth: 1,
    borderColor: 'grey',
    borderRadius: 15,
    padding: 15,
    backgroundColor: 'red',
    alignSelf: 'center',   },   boxTopAligned: {
    position: 'absolute',
    top: 0,
    alignItems: 'stretch',   },   boxBottomAligned: {
    position: 'absolute',
    bottom: 0,
    alignItems: 'stretch',   },   containerLeftAligned: {
    position: 'absolute',
    left: 0,
    top: '50%',
    alignItems: 'stretch',   },   boxLeftAligned: {
    textAlign: 'center',
    left: 0,
    transform: [{ rotate: '90deg' }],   },   boxRightAligned: {
    textAlign: 'center',
    right: 0,
    transform: [{ rotate: '90deg' }],   },   containerRightAligned: {
    position: 'absolute',
    right: 0,
    top: '50%',
    alignItems: 'stretch',   },

и результат вывода