我知道如何在视图中的文本末尾或开头显示图片，但我想在文本中间显示一个图标。

下面是一张Figma的预览图，供参考：

在我的代码中，我尝试用横向flex来创建上述视图，但如果把图片的大小增大到超过文本的行高，图标总是会移出预期区域。

我的当前代码（如前所述并未按要求工作）：

<Text style={styles.stepTitle}>
  Open Safari on your iPhone. Tap the options icon{' '}
  <Text style={{ lineHeight: 24 }}>
    {/* try increasing / decreasing the image dimensions */}
    <IconDetailsIcon
      width={24}
      height={24}
      style={{ transform: [{ translateY: 2 }] }}
    />
  </Text>
  {' '}in the address bar
</Text>


/*
stepTitle: {
  color: '#CCCCCC',
  fontSize: 14,
  lineHeight: 24,
  fontWeight: '400',
 },
*/

我想知道的是：

1. 在React Native中，是否可以在文本句子的任意位置显示内联图片（不使用绝对定位的技巧）？

解决方案

尝试把 <Text> 包裹图标的方式设为 position: 'relative'，并调整 top 以实现你想要的效果；我使用 '7px' 来在文本句子中垂直对齐图标，如下所示。

在较小的屏幕上也能正常显示，如有需要，可为移动端调整顶部的数值。