跟随用户使用反应映射和博览会地点行走

发布于 2025-02-07 13:04:19 字数 1322 浏览 2 评论 0原文

我目前正在开发React Native(Android App)的大学项目。 我在此组件中的目标是渲染一张地图,您可以在其中查看自己的位置,并在您走路时跟随您。

问题1 :有一个名为ClasterSerlocation的MapView道具,但仅在Apple设备上起作用。我该如何在Android手机上进行操作?

问题2 :我正在保存状态的位置,以便在其他任何地方重复使用它,但是位置对象在第一次渲染时是空的(或花一两秒模拟器)。每当我使用保存该信息的状态时,我都会出现错误,因为我有此延迟。

这是我的位置使用效果:

export default function App() {
      
      const [userLocation, setUserLocation] = useState({})
      const [isLoading, setIsLoading] = useState(false)
       
      const mapRef = React.createRef();
      React.useEffect(() => {
        (async () => {
          setIsLoading(true);
          let { status } = await Location.requestForegroundPermissionsAsync();
          if (status !== "granted") {
            console.log("Permission to access location was denied");
            return;
          }
    
          let location = await Location.getCurrentPositionAsync({
            accuracy: Location.Accuracy.Balanced,
            enableHighAccuracy: true,
            timeInterval: 1,
          });
          //console.log(location);
          //console.log(location.coords.latitude);
          
          
            setUserLocation(location)
            setIsLoading(false);
          
          
        })();
      }, []);

我是新来的React Native,谢谢您的耐心! :)

I'm currently developing an university project in React Native (android app).
My goal in this component is to render a map where you can see your location, and it follows you as you walk.

Problem 1: there's a MapView props named followsUserLocation, but it only works on Apple devices. How can I do it on an android phone?

Problem 2: I'm saving the location on a state in order to reuse it everywhere else, but the Location object is empty on first render (or takes a second or two to get the location info from the emulator). Whenever I use the state where I saved that info I get an error since I have this delay.

Here's my location useEffect:

export default function App() {
      
      const [userLocation, setUserLocation] = useState({})
      const [isLoading, setIsLoading] = useState(false)
       
      const mapRef = React.createRef();
      React.useEffect(() => {
        (async () => {
          setIsLoading(true);
          let { status } = await Location.requestForegroundPermissionsAsync();
          if (status !== "granted") {
            console.log("Permission to access location was denied");
            return;
          }
    
          let location = await Location.getCurrentPositionAsync({
            accuracy: Location.Accuracy.Balanced,
            enableHighAccuracy: true,
            timeInterval: 1,
          });
          //console.log(location);
          //console.log(location.coords.latitude);
          
          
            setUserLocation(location)
            setIsLoading(false);
          
          
        })();
      }, []);

I'm new in React Native, thank you for you patience! :)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

失去的东西太少 2025-02-14 13:04:19

您不能依靠关注suserLocation它是iOS特定的,并且不能提供更大的灵活性。

理想情况下,需要定制的位置制造商,这表明当前用户移动时的位置。

博览会定位软件包提供location.watchpositionasync(选项,回调)方法,该方法在移动时会连续派遣新的用户位置信息。

有了这些新信息,您可以实时更新位置标记。

You can't rely on followsUserLocation it's iOS-specific and not offers more flexibility.

Ideally, a Custom Location maker is required which indicates the current user's location as she moves.

The expo-location package provides Location.watchPositionAsync(options, callback) method which continuously dispatches new user location information when she moves.

With this new information, you can update the location marker in realtime.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文