CSS样式无法应用于React Native

我正在显示一些弹出视图,它将在图像上显示两个文本。因此,为此,我尝试在字符串中设置css。但是,文本出现在图像的底部。

我正在使用融合图库来加载图,一旦用户点击图线,我就会显示一些弹出窗口(工具提示)。该工具提示文本我正在尝试根据我的要求进行自定义

  toolText: '<div style={{  position: relative; text-align: center; color: white;}}><div><img height="50" width="50" src="http://www.pngpix.com/wp-content/uploads/2016/10/PNGPIX-COM-Mickey-Mouse-PNG-Transparent-Image-1-500x575.png"></img><div style={{ position: absolute; top: 2px; left: 8px; }}>Sample Text1<div><div style={{ position: absolute; top: 10px; left: 16px; }}>Sample Text2</div></div>',

输出如下

http://img3.mukewang.com/60a62b170001576c01430153.jpg

有任何建议,我想在视图顶部显示文本。


潇潇雨雨
浏览 223回答 3
3回答

慕斯王

最后,经过一些研发,我找到了解决方案,我没有为图像设置颜色。希望这对以后的人有所帮助。&nbsp;&nbsp;toolText:&nbsp;`<div&nbsp;style="border-top-color:&nbsp;200px&nbsp;solid&nbsp;#somecolor;&nbsp;margin-right:&nbsp;2px;&nbsp;background-color:#fff&nbsp;display:outer-block;&nbsp;width:auto;&nbsp;height:60px;"><span><text&nbsp;style="font-size:&nbsp;12px;&nbsp;margin-left:4px;&nbsp;font-weight:&nbsp;bold;&nbsp;&nbsp;color:#003A69;&nbsp;margin-top:10px;&nbsp;display:inline-block;">&nbsp;Sample&nbsp;Text1</text></span>{br}<span><text&nbsp;style="font-size:&nbsp;12px;&nbsp;color:#003A69;&nbsp;margin-left:4px;&nbsp;font-weight:&nbsp;bold;&nbsp;margin-top:2px;&nbsp;display:inline-block;">Sample&nbsp;Text2</text></span>{br}</div>`,

30秒到达战场

根据我的理解,React / React Native需要使用驼色框来使选择器名称可识别。另外,您的html / css的格式应类似于以下格式,以获得所需的叠加效果。<div style="position: relative;">&nbsp; &nbsp; <img>&nbsp; &nbsp; <div style="position: absolute;"></div>&nbsp; &nbsp; <div style="position: absolute;"></div></div>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript