React Native：将绝对定位的视图对齐到左/右中心答案

【问题标题】：React Native: Align Absolute positioned View to left/right centerReact Native：将绝对定位的视图对齐到左/右中心
【发布时间】：2020-01-13 13:20:02
【问题描述】：

我想构建一个可重用的组件，可以停靠在父容器的任何边缘，请参考下图

我不能对块使用 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>

有效但不完全符合我的要求

【问题讨论】：

什么是用containerLeftAligned 样式包装视图
只是一个<View style={{ borderWidth: 1 }}><AboveComponent /></View>

标签： react-native react-native-stylesheet

【解决方案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>
    );
  }
}

styles.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',   },

以及输出结果

【讨论】：