React Native-嵌套文本中的图像，垂直对齐不起作用

Question

const styles = StyleSheet.create({
  container: {
    fontSize: 15,
    alignItems: 'center',
    justifyContent: 'center',
  },
  insideText: {
    width: 30,
    height: 30,
    alignSelf: 'center',
  },
})  

<Text style={styles.container}>
    <Image style={styles.insideText} source={myImage} />
  test
</Text>

当我使用Swift实现此功能时 通过设置NSAttachment边界进行了修复。

但是React Native不知道如何访问这些参数。

我的代码的输出。 如何居中放置文字和图像？

不能将视图分成几个视图。 因为内容是灵活的，所以不知道会是多少。

较小的图像尺寸将使它们居中 图像太小。 我想保持图像大小。

Answer 1

这可能不是最好的方法，但是您可以这样做：

const styles = StyleSheet.create({
  container: {
    fontSize: 15,
    height: 30,
    paddingTop: (30 - 15) / 2,
    paddingLeft: 30
  },
  insideText: {
    width: 30,
    height: 30,
    position: 'absolute',
    left: 0,
    top: 0,
  },
})

Answer 2

不能完全确定您对灵活内容的要求是什么意思，但是将图像嵌套在文本中似乎并不可行。

您的样式灵活性较差，并且非常有限。

要在不设置绝对定位的情况下影响您想要的内容，只需将其包装，并将图标和文本作为父视图的同级即可：

<View
  style={{
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  }}>
  <Image style={styles.insideText} source={snackIcon} />
  <Text style={styles.container}>test</Text>
</View>

幸运的是，您的insideText和container样式适用于此示例：）

这是代码的零食： https://snack.expo.io/@paullyfire/centered-image-text-container

让我知道您是否有任何问题。