css - 将文本与图像对齐 - React Native

Question

我正在尝试对齐每张图片下方的社交图标文本，如下所示:

但是，我得到了这些结果:

我将每一行作为单独的 View 放置

<View style={styles.socialIcons}>
    <Image source={require("social/facebook-icon.png")} />
    <Image source={require("social/twitter-icon.png")} />
    <Image source={require("social/mail-icon.png")} />
    <Image source={require("social/message-icon.png")} />
</View>
<View style={styles.socialIconsText}>
    <Text style={styles.socialIconText}>Facebook</Text>
    <Text style={styles.socialIconText}>Twitter</Text>
    <Text style={styles.socialIconText}>Email</Text>
    <Text style={styles.socialIconText}>Message</Text>
</View>

接着是他们的风格:

socialIcons: {
    alignItems: 'center',
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'space-between',
    paddingLeft: 40,
    paddingRight: 40,
},
socialIconsText: {
    backgroundColor: 'transparent',
    alignItems: 'center',
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'space-between',
    paddingLeft: 40,
    paddingRight: 40,
},

我认为我应该做的是将文本放在图像标签内，但是当我这样做时，图像高度会切断其下方的任何文本。有没有办法获得图像高度并增加样式的高度？

或者是否有更好的方法来对齐图像下方的文本？

Answer 1

我认为填充会干扰文本。

还尝试使每个图像和文本元素的宽度为 25% + box-sizing: border-box;和中心文本。