React Native中如何实现Div1居中且Div2紧邻其右侧的布局？

问题根源 #

你之前的代码用justifyContent: 'center'会把两个View作为整体居中，导致Div1偏离屏幕中心，无法实现Div1单独居中的需求。

方案一：绝对定位+百分比偏移（推荐） #

无需额外嵌套，直接通过绝对定位将Div2固定在Div1右侧，同时保证Div1居中：

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

export default function App() {
  return (
    <View style={styles.parentContainer}>
      {/* Div1 - 居中于屏幕 */}
      <View style={styles.div1} />
      {/* Div2 - 紧邻Div1右侧，左间距10px */}
      <View style={styles.div2} />
    </View>
  );
}

const styles = StyleSheet.create({
  parentContainer: {
    flex: 1,
    width: '100%', // 占满屏幕宽度
    alignItems: 'center', // 垂直方向居中（可根据需求调整）
    justifyContent: 'center', // 让Div1水平居中
    position: 'relative', // 作为Div2绝对定位的参考容器
  },
  div1: {
    width: 200,
    height: 100,
    backgroundColor: 'orange',
  },
  div2: {
    position: 'absolute',
    left: '50%', // 定位到父容器水平中心
    marginLeft: 100 + 10, // 100是Div1宽度的一半，加上10px间距，刚好移到Div1右侧
    width: 100,
    height: 100,
    backgroundColor: 'red',
  },
});

方案二：嵌套容器控制居中 #

通过嵌套一个与Div1同宽的容器确保Div1居中，再将Div2绝对定位在其右侧：

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

export default function App() {
  return (
    <View style={styles.parentContainer}>
      {/* 承载Div1的容器，保证Div1居中 */}
      <View style={styles.centerWrapper}>
        <View style={styles.div1} />
      </View>
      {/* Div2 - 绝对定位在Div1右侧 */}
      <View style={styles.div2} />
    </View>
  );
}

const styles = StyleSheet.create({
  parentContainer: {
    flex: 1,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    position: 'relative',
  },
  centerWrapper: {
    width: 200, // 和Div1宽度一致，确保容器居中时Div1也居中
  },
  div1: {
    width: 200,
    height: 100,
    backgroundColor: 'orange',
  },
  div2: {
    position: 'absolute',
    left: 200 + 10, // Div1宽度加间距，直接定位到Div1右侧
    top: '50%', // 垂直方向对齐Div1
    marginTop: -50, // Div1高度的一半，实现垂直居中
    width: 100,
    height: 100,
    backgroundColor: 'red',
  },
});

关键注意点 #

• 不要在父容器直接使用justifyContent: 'center'放置两个兄弟元素，这会让整体居中而非单个元素居中。
• 使用绝对定位时，必须给父容器设置position: 'relative'，否则Div2会相对于整个屏幕定位。
• 若需要Div1和Div2垂直对齐，可通过alignItems: 'center'或top: '50%' + 负margin实现。

内容的提问来源于stack exchange，提问作者Philipp Epstein