React Native html渲染:图像问题
React Native html渲染:图像问题
提问于 2020-03-01 00:07:34
我尝试从JSON端点加载HTML，并将其显示在应用程序中。这在使用一些库时效果很好，但是HTML内容在底部也包含图像。
这些图像堆叠在一起，而不是相邻的居中。
我怎样才能做到这一点呢？使用哪个模块最好呢？
下面是一个代码片段。不确定如何正确设置样式:(
"<p><strong><em>Title –</em></strong> This a little text.</p>\n<p>This a little text</p>\n<div id='gallery-4' class='gallery galleryid-114867 gallery-columns-4 gallery-size-thumbnail'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https://urltosite/2020/02/28/photo/photo_2020-02-28_19-38-38/'><img width=\"150\" height=\"150\" src=\"https://urltosite/wp-content/uploads/2020/02/photo_2020-02-28_19-38-38-150x150.jpg?v=1582915513\"; class=\"attachment-thumbnail size-thumbnail\" alt=\"\" /></a>\n\t\t\t</div></figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https://urltosite/2020/02/28/phtoto/photo_2020-02-28_19-38-42-2/'><img width=\"150\" height=\"150\" src=\"https://urltosite/wp-content/uploads/2020/02/photo_2020-02-28_19-38-42-1-150x150.jpg?v=1582915516\"; class=\"attachment-thumbnail size-thumbnail\" alt=\"\" /></a>\n\t\t\t</div></figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https://www.urltosite/2020/02/28/phtot/photo_2020-02-28_19-38-46/'><img width=\"150\" height=\"150\" src=\"https://urltosite/wp-content/uploads/2020/02/photo_2020-02-28_19-38-46-150x150.jpg?v=1582915518\"; class=\"attachment-thumbnail size-thumbnail\" alt=\"\" /></a>\n\t\t\t</div></figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https://urltosite/2020/02/28/photo/photo_2020-02-28_19-38-48/'><img width=\"150\" height=\"150\" src=\"https://urltosite/wp-content/uploads/2020/02/photo_2020-02-28_19-38-48-150x150.jpg?v=1582915521\"; class=\"attachment-thumbnail size-thumbnail\" alt=\"\" /></a>\n\t\t\t</div></figure>\n\t\t</div>\n\n"```回答 1
Stack Overflow用户
回答已采纳
发布于 2020-03-01 13:54:42
您可以使用react-native-render-html，并使用tagsStyles和classesStyles属性为每个html标记或类指定样式。下面的代码是使用此道具的示例：
<HTML
html={item.message}
tagsStyles={{
p: {
fontSize: 22,
lineHeight: 30,
marginBottom: 0
},
img: {
...
}
}}
classesStyles={{
'custom-image': {
...
}
}}
ignoredStyles={['line-height']} />您还可以使用renderers属性来呈现特定标签的自定义内容。有关react-native-render-html的更多信息，请访问以下链接：https://github.com/archriss/react-native-render-html
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60467082
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号