在MapView上显示文本，当覆盖的文本发生变化时无需重绘MapView

Question

我在一些带有文本的

<MapView />

视图旁边有一个

position: absolute

。在 MapView 中，我有一个

<Circle />

来标记地图内的区域。我有诸如用户在重叠文本上的坐标以及用户是否在地图上圆形区域的半径内之类的信息。

我希望能够更改覆盖在 MapView 顶部的文本，而无需强制重绘地图。每当文本发生变化时，地图都会重新绘制，从而重置用户的缩放并使其立即消失。

文本/视图组件不在彼此之内，而是并排排列以形成层次结构。

玩家的位置通过

showUserLocation={true}

绘制在 MapView 组件上。实际坐标被赋予文本组件，以通过

Location.watchPositionAsync()

显示给用户

const myComponent = () => {
  const [location, setLocation] = useState(null);
  const [circle, setCircle] = useState({
    radius: 5,
    latitude: 0,
    longitude: 0,
  });

  // subscription to the users location
  useEffect(() => {
    subscription = await Location.watchPositionAsync(
      callback: (newLocation) => {
        setLocation(newLocation)
      }
    )
  }

  const isInCircleRadius() => {
    // return true/false based on if user is within the radius of the MapView Circle
  }

  return (
    <>
      <MapView 
        style={{ /* fullscreen all that stuff */ }}
        showUserLocation={true}>
          <Circle radius={circle.radius} center={circle.latitude, circle.longitude} />
      </MapView>
      <View>
        // Text changing here causes the MapView to redraw as well, even though this is just 
        // position: absolute and beside the MapView component
        <Text>{location.latitude} {location.longitude} {isInCircleRadius(location)}
      </View>
    </>
  )

}

我尝试将 MapView 放入其自己的组件中，并在父组件中调用它来保存文本和地图组件。

我尝试创建一个本地位置变量，因此只有文本组件读取

TextSpecificLocation

并且 MapView 可以使用

MapSpecificLocation

，即使它们具有完全相同的数据。只是为了让他们不依赖相同的变量。

Answer 1

没有依赖数组的useEffect每次调用都会导致新的执行

setLocation

。

  // subscription to the users location
  useEffect(() => {
    subscription = await Location.watchPositionAsync(
      callback: (newLocation) => {
        setLocation(newLocation)
      }
    )
   },[]) // Add empty dependency array