react-native - 在 React Native 中，在文本中间垂直对齐图标

Question

我知道有人问过类似的问题，并且我已经审查了很多，但他们无法为我的案例提供解决方案。

这是我的一段代码。

<View style={{backgroundColor: 'white', flexDirection: 'row', paddingHorizontal: 20, paddingVertical: 50}}>
  <View style={{flexDirection: 'row', flex: 1, flexWrap: 'wrap'}}>
     <Text>Some Text some text some text (
     <Text style={{fontSize: 32}}>A</Text>
     ) Some Text some text some text
     </Text>

     {/*<Text>Some Text some text some text(</Text>*/}
     {/*<Text style={{fontSize: 32}}>A</Text>*/}
     {/*<Text>) Some Text some text some text</Text>*/}

  </View>
  <TouchableOpacity onPress={() => {}} style={{backgroundColor: 'red', justifyContent: 'center'}}>
    <Text style={{fontSize: 32, alignSelf: 'center'}}>X</Text>
  </TouchableOpacity>
</View>

下面是结果。

“A”和“X”是图标......不同大小的字体，我没有问题将“X”与文本对齐......问题在于“A”......

下面是预期的结果。

我能得到的最好的就是这个https://codesandbox.io/s/react-native-1y0q4但是如果宽度不够，flexWrap 会切断句子

标签： react-nativeflexbox

Answer 1

例如，在 CSS 中，您可以获得宽度vertical-align:sub;，试试宽度

<Text style={{fontSize: 32, verticalAlign: 'baseline' }}>A</Text>

像这里 https://github.com/react-icons/react-icons/issues/68