如何在本机中垂直对齐文本

Question

嗨，

真正反应本地。我正在尝试对齐文本，以使“£”符号的顶部与“ 45”的顶部对齐。 W3学校展示了一种用于图像对齐的技术“ vertical-align：text-top：”，我想知道在react native中是否存在等效的文本对齐方式。

Answer 1

您可以使用Flexbox来实现。

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <View style={styles.poundSignContainer}>
          <Text style={styles.poundSign}>£</Text>
        </View>
        <Text style={styles.value}>45</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 26,
    backgroundColor: 'white',
  },
  row: {
    flexDirection: 'row'
  },
  poundSignContainer: {
    justifyContent: 'flex-start'// To make the sign in line with top, this styling is not needed, because 'flex-start' is the default behave.
    // It is possible to control the vertical alignment with justifyContent:
    // 'flex-start' - aligned to top
    // 'center'     - centered
    // 'flex-end'   - aligned to bottom
  },
  poundSign: {},
  value: {
    fontSize: 46,
    marginLeft: 5,

    // It is possible to use "lineHeight" and/or "height" to mannually correct the alignment, mainly when the value and sign size difference is bigger.
    lineHeight: 42,
    height: 42, 
  },
});

它应该看起来像这样： Layout example