使用 React Native 在地图上可视化您的照片

 

约束和权衡

选择我的技术堆栈的原因是为了更好地了解现代 SPA 框架。所以很自然地，我的选择是React Native。作为移动开发的新手，我决定从Expo入手。这是启动项目的好方法，因为它包含几个模板以及一个不错的调试工具集。

我所了解到的是，世博会的便利并不是免费的。以下是一些缺点： - 与Facebook SDK的隐式集成- 一些关键库的贬值，例如expo-ads-admob -经典构建的弃用。

但是，这些缺点可以通过 EAS 构建来弥补。

可视化算法

为了提供最佳的外观和感觉，我们需要让用户感觉在应用程序枚举照片和获取其地理数据时正在发生某些事情。所以渲染序列如下所示：

1. 显示启动画面
2. 将其替换为类似于初始屏幕但额外提供有关加载进度的信息的屏幕。
3. 处理完照片后，显示带有点的地图。

让我们简单地看一下这几点。

显示进度信息

下面提供组件代码

SplashScreen.preventAutoHideAsync().catch(() => {
  /* reloading the app might trigger some race conditions, ignore them */
});

const App = () => {
  return (
    <AnimatedAppLoader/>
  );
}

return (
      <View style={
   { flex: 1 }}>
        <AnimatedSplashScreen/>
      </View>
    )

兴趣点是AnimatedSplashScreen组件。

const AnimatedSplashScreen = () => {
    const textAnimation = useMemo(() => new Animated.V