React Native：水平对齐 - 中心和右侧

Question

在我的 React Native 项目中，我需要对齐两个元素。 一个应该在中心，另一个应该在屏幕的最右边。 但是，我无法正确处理。

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.mainTitle}>
        <Text style={{display: 'flex'}}>
          Main Title
        </Text>
        <Text
        style={{
          color: '#528bb4',
          fontSize: 14,
          fontWeight:600,
          marginLeft: 'auto',
          width:10,
          display:'flex',
          marginRight:10
        }}
      >?</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  mainTitle: {    display: 'flex', flexDirection: 'row', backgroundColor: '#fff',height: '30%', width: '100%',alignItems: 'center',justifyContent: 'center',},
});

小吃 URL: https://snack.expo.io/iXjlvlGpd

我无法获得中心的主要元素和右侧的下一个元素。

Answer 1

这应该可以解决问题。

1. 基本上删除display: 'flex'因为它没用。
2. 接下来，当您给出flex: 1时，它会使 Text 元素采用其父元素中剩余的可用宽度。
3. 现在元素采用全宽，给它textAlign: 'center'以使文本显示在中心。

<Text style={{ flex: 1, textAlign: 'center'}}>
   Main Title
</Text>

这里是小吃

如果您想实现真正的中心，则需要绝对使用 position 正确的元素，以便中心元素可以占据整个宽度。 但是，这种方法可能会导致重叠。

Answer 2

您可以执行以下操作，将绝对 position 用于正确的文本，并为文本设置 alignself center

  <View style={styles.mainTitle}>
    <Text style={{ display: 'flex', alignSelf: 'center' }}>Main Title</Text>
    <Text
      style={{
        color: '#528bb4',
        position: 'absolute',
        fontSize: 14,
        fontWeight: 600,
        right: 10,
        width: 10,
        display: 'flex',
        marginRight: 10,
      }}>
      ?
    </Text>
  </View>

https://snack.expo.io/@guruparan/dfddf9