react-native - 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',   },

和输出结果