如何在应用程序启动时合并 Walkthrough 屏幕

Question

我想在我现有的应用程序代码中添加一个三屏演练。在闪屏之后的那一刻，下一个屏幕显示为

这是应用程序的三个选项卡主视图。

我想要实现的是在初始屏幕之后，我想在附加的主应用程序屏幕加载之前展示三个屏幕的演练，我已经完成了演练屏幕的所有代码，它只是问题是在哪里添加该代码以获得所描述的预期结果。

我已经尝试关注了；一个。尝试将 Walkthrough 组件添加到索引文件中 b.尝试将 Walkthrough 组件添加到 App 文件中

谢谢

    ========== Index.js ==========
    import { AppRegistry } from 'react-native';
    import App from './App';

    AppRegistry.registerComponent('Pak', () => App);


    ========== App.js ==========
    import React, { Component } from 'react';
    import { Tabs } from './src/config/router';

    export default class App extends Component {
      render() {
        return (
          <Tabs />
        );
      }
    }

Answer 1

我不确定本机移动应用程序。但对于基于浏览器的移动应用程序和 Web 应用程序，您可以使用 Whatfix。当然，这是一个 Build v/s Buy 电话，您必须打这个电话，而且这个软件非常容易使用。

如果您不想要太贵的东西，Whatfix 也有 free community version。

Answer 2

创建一个名为 Walkthrough 的组件，包含三个幻灯片或选项卡。在 Asyncstorage 中保存一个 bool，用于存储用户是否看过 Walkthrough 组件。在应用程序启动时，当显示 Spalshscreen 时，在 AsyncStorage 中检查名为 Walkthrough 的项目，该项目在第一次启动时将为 false，如果为 false，return 向用户显示 Walkthrough 组件。一旦用户点击 done（任何按钮完成 it/skip），在 AsyncStorage 中将 Walkthrough 设置为 true 并将用户带到主页。在连续启动时，启动时的 Asyncstorage 将 return Walkthrough 设为 true，因此默认情况下您 return 主页，因此不再向他们显示 walkthrough。

介绍幻灯片包

下面链接的是一个维护包，可以轻松创建介绍性滑块。如果您想要带有自定义信息和图像的介绍滑块，您可以使用它。否则您可以创建自己的自定义组件，三个或四个，将它们放在 HorizontalSliders 中并显示给用户。

https://github.com/Jacse/react-native-app-intro-slider

如何在应用程序启动时合并 Walkthrough 屏幕

How to incorporate Walkthrough screens as app launches

javascript

android

walkthrough

ios

react-native