CSS-стили не могут применяться в реагировать родной

Question

Я показываю всплывающее окно, которое отображает два текста поверх изображения. Итак, для этого я пытаюсь установить 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>',

И вывод следующий

Любые предложения, я хочу отображать текст в верхней части представления.

Answer 1

Используйте 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,
},

Демо

Answer 2

Наконец, я нашел решение после того, как проделал некоторые исследования и разработки. Вместо изображения я установил цвет для этого.

Надеюсь, это поможет кому-то в будущем.

  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>`,

Answer 3

Насколько я понимаю, React / React Native требует наличия верблюжьего корпуса, чтобы имена селекторов были узнаваемыми.

Ссылка: Встроенные стили | Реагировать

---

Кроме того, ваш html / css должен быть отформатирован, как показано ниже, чтобы получить желаемый эффект наложения.

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

Ссылка: CSS Layout - Свойство position