如何使用 react native render html 在 react native 中在一行中显示文本和图像？

Question

我想在一行中显示图像和文本，但无法实现。所有内容都来自 backend.i m 中的一个 html 字符串，使用 react native render html 来呈现这样的文本。

后台的字符串是这样的。 -> “<p>Testing long messages with Text<img width="25" height="25" src="https://node.whizbite.com/media/emoji/png/emoji-32.png" +="" class="emojiHeight24 margin_right3"><img width="25" height="25" src="https://node.whizbite.com/media/emoji/png/emoji-31.png" +="" class="emojiHeight24 margin_right3"><img width="25" height="25" src="https://node.whizbite.com/media/emoji/png/emoji-30.png" +="" class="emojiHeight24 margin_right3">”

                          <HTML
                              baseFontStyle={{
                                color: '#555555', 
                                fontSize: moderateScale(15),
                                fontWeight: '400', 
                                textAlign: 'left',
                              }}

                              containerStyle={{
                                marginLeft: 0,
                                marginRight: 10,
                                color:'#555555',
                                fontWeight: '400', 
                                textAlign: 'left',
                                flexDirection:'row',
                                paddingEnd: 10,
                              }}
                              html={item.message}
                             />

Answer 1

您可以使用 tagsStyles 和 classesStyles 道具为每个 html 标签或类指定样式。以下代码是使用此道具的示例：

<HTML
   html={item.message}
   tagsStyles={{
      p: {
          fontSize: 22,
          lineHeight: 30,
          marginBottom: 0
      },
      img: {
          ...
      }
   }}
   classesStyles={{
      'custom-image': { 
           ... 
      } 
   }}
   ignoredStyles={['line-height']} />

Answer 2

使用 tagsStyles 道具你可以做到这一点

这是一个代码示例

<HTML
html={item.message}
tagsStyles={{
          img: {
            flexDirection: 'row',
          },
          p: {
            flexDirection: 'row',
          },
        }}
/>

here是解释

如何使用 react native render html 在 react native 中在一行中显示文本和图像？

how to show text and images in one line in react native using react native render html?

reactjs

react-native

react-native-android

react-native-ios