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

问题描述 投票：1回答：2

我想在一行中显示图像和文本，但是如何操作却没有用。所有内容来自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}
                             />
reactjs react-native react-native-android react-native-ios
2个回答
2
投票

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

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

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

enter image description here

这是代码示例

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

here是说明
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.