React-Native: может ли React Native узнать точную абсолютную позицию для каждого устройства?

Я хочу показать текст на изображении, используя абсолютную позицию. Однако точное положение определить сложно, так как размер экрана у каждого устройства разный.

Есть ли способ рассчитать точное положение?

Задавал аналогичный вопрос, но не получил нужного ответа. мой первый вопрос

Ниже приведен код, который я пробовал.

 <ImageBackground
      source = {require("../../assets/brain/ohi.png")}
      style = {{ width: "100%", height: "100%", position: "relative" }}
      resizeMode = "contain"
      onLayout = {(event) => this.setLayout(event.nativeEvent.layout)}
    >
      <Text
        style = {{
          position: "absolute",
          left: windowWidth * 0.22,
          top: windowHeight * 0.4,
        }}
      >
        Text_1
      </Text>
      <Text
        style = {{
          position: "absolute",
          left: 280,
          top: 300,
        }}
      >
        Text_2
      </Text>
    </ImageBackground>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
3
0
926
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Смотрите похожий выпуск.

Обратите внимание, что координаты x и y объекта layout относятся к непосредственному родительскому компоненту компонента, в котором используется onLayout. В вашем случае макет ImageBackground берется относительно того, что сразу его обертывает.

Возможным решением для размещения Text вот так является дерево композиции, такое как

const [layout, setLayout] = useState();

<View style = {{position: 'relative'}}>
  <Image width = {200} height = {200} onLayout = {event => setLayout(event.nativeEvent.layout)} />
  
  <Text style = {{position: 'absolute', top: (layout?.y || 20) + 20, left: (layout?.x || 30) + 30}} />
</View>

Другие вопросы по теме