Найти начальную позицию компонента <Text>на экране в реагировать родной - PullRequest
Новая
       4

Найти начальную позицию компонента <Text>на экране в реагировать родной

0 голосов
/ 30 апреля 2020

У меня есть фоновое изображение, на нем я хочу написать текст, который можно перетаскивать в любом месте экрана. Прямо сейчас я использую компонент «Reaction-native-draggable» для этой работы.

Моя цель состоит в том, чтобы найти начальную позицию (координаты XY) текста, как только перетаскивание отпущено. Пример: текст «Hello world», если я перетаскиваю его полностью вверх и полностью влево, то мне нужно знать значения XY = 0, 0, если я перетаскиваю этот текст горизонтально без изменения Y, то X, Y = скажем, 100,0

Я читал onLayout могу, но я не смог заставить его работать, так как я только начал играть с реагировать родной.

Вот мой код 

import React from 'react';
import { StyleSheet, Text, View, ImageBackground, StatusBar, Button, Dimensions,Image } from 'react-native';
import Draggable from 'react-native-draggable';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.maxWidth = Dimensions.get('window').width - 20;
    this.maxHeight = Dimensions.get('window').height - 40;
    this.state = {};
  }
  onDragReleaseCustom(value) {
    console.log('drag release', value.nativeEvent);
    console.log('drag release', value.nativeEvent);
  }


  onLayout = (e) => {
    console.log("working gere");
    console.log(e.nativeEvent);
    console.log("widht,height",e.nativeEvent.layout.x,e.nativeEvent.layout.y)
  }


  render() {

    return (
      <>
        <StatusBar hidden />
        <View style={styles.container}>
          <ImageBackground source={require('./assets/bg1.jpg')} style={styles.backgroundImage}>
          </ImageBackground>
        </View>


        <Draggable
          minX = {15}
          minY = {15}
          maxX = {this.maxWidth}
          maxY = {this.maxHeight}
          x = {30}
          y = {112}
          onDragRelease = {this.onLayout()}>

        <View >
          <Text style={styles.customText}>Hi this is an example </Text>

        </View>
        </Draggable>

        <View style={styles.buttonStyle}>
          <Button color="#f00fff" title="Save"></Button>
        </View>


      </>
    );
  }
}

enter image description here

Может кто-нибудь предложить лучшие способы для достижения этой цели. любая помощь очень ценится.

Ответы [ 2 ]

0 голосов
/ 30 апреля 2020

Да, ваш подход правильный. Вы можете получить изменения макета, используя onLayout prop в Text компоненте,

Сначала вы должны передать onLayout в Text

<Text onLayout={this.onLayout}>Hi this is an example</Text>

, затем вы можете получить значение, используя 

onLayout = (event) => {
  const { x, y, height, width } = event.nativeEvent.layout;
  console.log(x, y);
}

Надеюсь, это поможет вам. Не стесняйтесь сомнений.

0 голосов
/ 30 апреля 2020

Вам нужно будет использовать PanResponder API React native. Используйте следующую ссылку, чтобы узнать больше об этом.

https://reactnative.dev/docs/panresponder

...