react-native - 反应原生。手机APP启动引导画面的内在逻辑是什么？

Question

我们启动一个应用程序，您会在屏幕上看到有关如何使用此应用程序等的多页指南。它是如何工作的？我的建议：我在 firebase 中有引导键，我在启动时将其值加载到本地存储中。它的默认值为 1。1 - 应该显示它，0 - 不应该显示它。当我开始时，我默认显示它，但是当用户到达最后一个屏幕时，我将指南键的值设置为 0。指南只是一个场景列表（react-native-router-flux）。正确与否？什么是最佳实践？什么库允许我使用点导航创建连接的屏幕？

标签： react-nativenavigation

Answer 1

我最近实现了这一点。我会完全避免在 firebase 中使用引导键，因为您可以在本地完成它。您可以使用异步存储将布尔值写入存储，例如userDidCompleteGuide. 然后，当您启动应用程序时，如果从异步存储读取时未定义该值，则您知道要显示指南组件。完成指南后，将该布尔值保存到异步存储中。如果你已经使用了 redux-persist，你也可以让它通过 redux 持久化。

我使用 react-navigation 以及带有 react native 的流体过渡来为屏幕上的共享对象设置动画。

在基本层面上，在 react native 中创建一个点组件真的很容易，所以不要为它使用库。它只是一个具有宽度、高度、边框半径和颜色的视图。根据您所在的屏幕更改颜色以指示活动或非活动点。您可以将其中的几个放在一行中以显示连续的步骤，让第一个显示活动颜色（如白色），其他显示为灰色。然后，您可以将整个指南屏幕包裹在可触摸的不透明度中。这样，您可以点击屏幕上的任意位置以前进到指南的下一页，这样做时，您可以将第二个点设置为白色，将第一个点设置为灰色。您可以在两页上都有点，并且在更改页面时只需更改颜色即可。或者您可以让它们成为同一个组件并显示上面的实际页面，并使用组件状态根据哪个页面处于活动状态来动态更改颜色。只需在切换到下一个屏幕时使用可触摸的不透明度设置状态以指示哪个应该处于活动状态，然后根据该状态显示页面。