Question

我正在尝试使用钩子在 React Native 上的地图上更新我的标记坐标，但我不熟悉 Java 脚本及其工作原理。坐标已更新但不会反映在地图上（标记不会移动到新坐标），除非我退出并重新进入屏幕，但我希望它在我设置新坐标时自动更新。我曾尝试使用 render() 但它由于某些错误而无法正常工作（函数作为 React 子项无效）。有没有办法强制渲染或替代 React Native 的钩子可以用于这种情况？

可以使用 setxCord 和 setyCord 设置标记 x,y 坐标

      <MapboxGL.MarkerView coordinate={[xCord, yCord]} anchor={{x: 0, y: 0}} draggable={false}>

我试过这样做

// to update new position for marker
export class Position {
  constructor(x,y) {
    this.x = 5;
    this.y = 5;
  }
  getX() {
    return this.x;
  }

  setX(x) {
    this.x = x;
  }

  getY() {
    return this.y;
  }

  setY(y) {
    this.y = y;
  }

  setCoordinates(x,y) {
    var dx = x * 0.12 * 6.24 / 7.8 + 1.96;
    var dy = y * 0.12 * 9.55 / 12 + 0.35;
    this.x = dx;
    this.y = dy;
  }
}

const createScanHandler = () => {
  console.log(position);
  position.setCoordinates(32.5, 67.5);
}

let position = new Position();

我也尝试使用 .bind() 但它没有用。我也研究过使用 componentDidMount 来更新坐标，但我不知道如何使用它，因为我不熟悉 React 和 JS。

非常感谢任何帮助。提前致谢。

Answer 1

尝试将您的坐标存储在：

const [coordinate, setCoordinate] = React.useState(/* here you object or array */);

如果您看到链接 React lifecycle methods。你会看到在改变 props 和 state 之后 render() 调用了什么。

Also see official documentation。

Javascript：类更改不重新渲染

1 个答案: