Я хочу показать текст на изображении, используя абсолютную позицию. Однако точное положение определить сложно, так как размер экрана у каждого устройства разный.
Есть ли способ рассчитать точное положение?
Задавал аналогичный вопрос, но не получил нужного ответа. мой первый вопрос
Ниже приведен код, который я пробовал.
<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>





Смотрите похожий выпуск.
Обратите внимание, что координаты 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>