如何在应用程序启动时合并演练屏幕答案

【问题标题】：How to incorporate Walkthrough screens as app launches如何在应用程序启动时合并演练屏幕
【发布时间】：2017-11-15 09:54:51
【问题描述】：

我想在我现有的应用程序代码中添加一个三屏演练。在启动屏幕之后的那一刻，下一个屏幕似乎是

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

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

我已经尝试过关注；一种。尝试将演练组件添加到索引文件中湾。尝试将 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 />
        );
      }
    }

【问题讨论】：

标签： javascript android ios react-native walkthrough

【解决方案1】：

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

介绍幻灯片包

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

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

【讨论】：

【解决方案2】：

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

Whatfix 也有一个free community version，如果你不是在寻找太贵的东西。

【讨论】：