Question

 <View style={ViewStyle}>
   <Text
     includeFontPadding={false}
     textAlignVertical='bottom'
     style={Text1Style}
   >
     hello
   </Text>
   <Text
     includeFontPadding={false}
     textAlignVertical='bottom'
     style={Text2Style}
   >
     world
   </Text>
 </View>

 const ViewStyle = {
   flexDirection: 'row',
   alignItems: 'baseline',
 }

 const Text1Style = {
   fontSize: 20,
 }

 const Text2Style = {
   fontSize: 10,
 }

如何使它们与基线对齐？

Answer 1

我认为问题出在其他地方。当我为您检查了您的代码段时，它与基线对齐。也许flexbox会导致您的问题。

Answer 2

我使用了您的代码，它以基线方式对齐。必须有导致问题的视图或包裹的东西。 PFB。链接Expo snack

Answer 3

解决方法

此问题的解决方法似乎是将<Text>元素包装在另一个<Text>中，因此您将使用以下结构：

 <Text>
   <Text>hello</Text>
   <Text>world</Text>
 </Text>

代替：

 <View>
   <Text>hello</Text>
   <Text>world</Text>
 </View>

将alignItems='baseline'保留在外部元素上。

但是，这有一个不幸的副作用，就是嵌套的文本cannot be positioned using Flexbox anymore。

背景：针对React Native的问题：

这似乎是只影响android的错误。为此，至少有4个问题针对react-native。所有这些似乎都被僵尸程序或人类关闭了，没有给出具体原因或非解决方法的解决方案：

React Native中的基线对齐

3 个答案: