如何在 React Native 中垂直對齊文本

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

它應該是這樣的：布局示例