Javascript 反应本机：水平对齐-居中和右侧

在我的React原生项目中，我需要对齐两个元素。一个应该在中间，另一个应该在屏幕的最右边。然而，我无法把它做好

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',},
});

导出默认函数App（）{
返回(
主标题
?
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
背景颜色：“#ecf0f1”，
填充：8，
},
主标题：{display:'flex'，flexDirection:'row'，backgroundColor:'#fff'，height:'30%'，width:'100%'，alignItems:'center'，justifyContent:'center'，}，
});

零食网址：

---

我无法获取中间的主元素和右边的下一个元素。

这应该可以解决问题

基本上删除

显示：“flex”

，因为它没有任何用处

接下来，当您给出

flex:1

时，它使文本元素在其父元素中获得剩余的可用宽度

现在该元素具有全宽，请将其设置为

textAlign:“center”

以使文本显示在中心

主标题

---

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

这应该可以解决问题

基本上删除

显示：“flex”

，因为它没有任何用处

接下来，当您给出

flex:1

时，它使文本元素在其父元素中获得剩余的可用宽度

现在该元素具有全宽，请将其设置为

textAlign:“center”

以使文本显示在中心

主标题

---

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

您可以执行以下操作，将am绝对位置设置为正确的文本，并将alignself居中设置为文本

  <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>

主标题
?

---

您可以执行以下操作，将am绝对位置设置为正确的文本，并将alignself居中设置为文本

  <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>

主标题
?

---

谢谢。这真的很有帮助。是否有可能实现主标题的真正中心，使其实际上位于整个宽度的中心，同时仍保持第二个元素的右对齐？嘿。是的，如果我们在右边的元素上使用“绝对”位置，就有可能实现真正的中心。更新了答案。谢谢。这真的很有帮助。是否有可能实现主标题的真正中心，使其实际上位于整个宽度的中心，同时仍保持第二个元素的右对齐？嘿。是的，如果我们在右边的元素上使用“绝对”位置，就有可能实现真正的中心。更新了答案。