css 样式无法应用于本机反应答案

【问题标题】：css styles are not able to apply in react nativecss 样式无法应用于本机反应
【发布时间】：2019-09-21 13:32:04
【问题描述】：

我正在显示一些弹出视图，它将在图像上显示两个文本。所以，为此我试图在字符串中设置 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>',

输出如下

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

【问题讨论】：

这是反应吗？还是反应原生的？你在用什么库？
这是原生反应。请检查更新的查询。
能否提供MCVE？
我已经提供了样式的字符串格式以及文本。

标签： javascript css react-native styles

【解决方案1】：

最后，我在做了一些研发后找到了解决方案，我没有为它设置颜色，而不是图像。

希望这对将来的某人有所帮助。

  toolText: `<div style="border-top-color: 200px solid #somecolor; margin-right: 2px; background-color:#fff display:outer-block; width:auto; height:60px;"><span><text style="font-size: 12px; margin-left:4px; font-weight: bold;  color:#003A69; margin-top:10px; display:inline-block;"> Sample Text1</text></span>{br}<span><text style="font-size: 12px; color:#003A69; margin-left:4px; font-weight: bold; margin-top:2px; display:inline-block;">Sample Text2</text></span>{br}</div>`,

【讨论】：

【解决方案2】：

使用position: 'absolute' 和top、right、bottom 和left 定位您的Text

export default class ToolText extends Component {
  render() {
    return (
      <View style={styles.toolTextContainer}>
        <Image
          style={styles.image}
          source={{
            uri:
              'http://www.pngpix.com/wp-content/uploads/2016/10/PNGPIX-COM-Mickey-Mouse-PNG-Transparent-Image-1-500x575.png',
          }}
        />
        <Text style={styles.text1}>Sample Text 1</Text>
        <Text style={styles.text2}>Sample Text 2</Text>
      </View>
    );
  }
}

样式

text1: {
  position: 'absolute',
  top: 2, 
  left: 8,
},
text2: {
  position: 'absolute',
  top: 12,
  left: 16,
},
toolTextContainer: {
  position: 'relative',
  color: 'white',
  justifyContent: 'center',
},
image: {
  width: 50,
  height: 50,
},

Demo

【讨论】：

【解决方案3】：

据我了解，React/React Native 要求选择器名称采用驼峰式大小写才能被识别。

参考：Inline Styles | React

此外，您的 html/css 格式应类似于以下格式，以获得所需的叠加效果。

<div style="position: relative;">
    <img>
    <div style="position: absolute;"></div>
    <div style="position: absolute;"></div>
</div>

参考：CSS Layout - The position Property

【讨论】：

我认为你没有明白我的意思，我正在做本地反应。
我正在尝试在字符串中添加样式