时间戳

首页 > 解决方案 > React Native：水平对齐 - 中心和右侧

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

问题描述

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

小吃网址：https ://snack.expo.io/iXjlvlGpd

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

标签： javascriptcssreact-native

解决方案

您可以执行以下操作，为正确的文本设置绝对位置，并为文本设置 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

推荐阅读