【问题标题】:React Native - Show application intro only once (first run time - on hold)React Native - 仅显示一次应用程序介绍(第一次运行时 - 暂停)
【发布时间】:2020-01-24 04:33:49
【问题描述】:

我怎样才能只显示我的应用程序的应用程序介绍一次?如果您可以使用 SQLite 数据库而不使用 AsyncStorage,请给我展示示例。

我的应用介绍包 - https://github.com/Jacse/react-native-app-intro-slider.

我的 SQLite 包 - https://github.com/andpor/react-native-sqlite-storage

我现在的代码 - https://imgur.com/a/2e4uIwl

/*This is an example of React Native App Intro Slider */
import React from 'react';
//import react in project 
import { StyleSheet, View, Text } from 'react-native';
//import all the required component
import AppIntroSlider from 'react-native-app-intro-slider';
//import AppIntroSlider to use it
export default class TestView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showRealApp: false,
      //To show the main page of the app
    };
  }
  _onDone = () => {
    // After user finished the intro slides. Show real app through
    // navigation or simply by controlling state
    this.setState({ showRealApp: true });
    this.props.navigation.navigate('Home');
  };
  _onSkip = () => {
    // After user skip the intro slides. Show real app through
    // navigation or simply by controlling state
    this.setState({ showRealApp: true });
    this.props.navigation.navigate('Home');
  };
  render() {
    //If false show the Intro Slides
    if (this.state.showRealApp) {
      //Real Application
      return (
        <View
          style={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            padding: 50,
          }}>
          <Text>
            This will be your screen when you click Skip from any slide or Done
            button at last
          </Text>
        </View>
      );
    } else {
      //Intro slides
      return (
        <AppIntroSlider
          slides={slides}
          //comming from the JsonArray below
          onDone={this._onDone}
          //Handler for the done On last slide
          showSkipButton={true}
          onSkip={this._onSkip}
          showPrevButton={true}
        />
      );
    }
  }
}
const styles = StyleSheet.create({
  image: {
    width: 200,
    height: 200,
  },
  text: {
    color: '#FFFFFF',
    fontSize: 20,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: 'white',
    backgroundColor: 'transparent',
    textAlign: 'center',
    // marginTop: 16,
  },
});

const slides = [
  {
    key: 's1',
    title: 'Вземи и върни',
    titleStyle: styles.title,
    text: 'Добре Дошли! Благодарим Ви, че избрахте нашето приложение!',
    textStyle: styles.text,
    image: require('../../assets/images/logo.png'),
    imageStyle: styles.image,
    backgroundColor: '#21AABE',
    // backgroundColor: '#20d2bb',
  },
  {
    key: 's2',
    title: 'Какво представлява нашето приложение?',
    titleStyle: styles.title,
    text: 'Приложението представлява мултиплатформена система, която дава улеснен достъп до целия инвентар на дадена фирма и предлага възможност за интерактивна комуникация между инвентаризатора и работниците.',
    textStyle: styles.text,
    image: require('../../assets/images/intro/book.png'),
    imageStyle: styles.image,
    backgroundColor: '#98cc00',
  },
  {
    key: 's3',
    title: 'Каква е целта му?',
    titleStyle: styles.title,
    textStyle: styles.text,
    text: 'Целта е бързо, полезно и удобно инвентаризиране на средствата, като има човек, който се грижи за инвентара на дадената фирма и по този начин се осъществява лесна връзка, с която цялата информация за работниците и инструментите се записва.',
    textStyle: styles.text,
    image: require('../../assets/images/intro/bulb.png'),
    imageStyle: styles.image,
    backgroundColor: '#808080',
  },
  {
    key: 's4',
    title: 'Инструментите',
    titleStyle: styles.title,
    textStyle: styles.text,
    text: 'Това меню съдържа едни от основните категории инструменти, добавени от нас, също така ви дава възможността да създавате свои подкатегории и да добавяте инструменти към тях.',
    image: require('../../assets/images/intro/toolbox.png'),
    imageStyle: styles.image,
    backgroundColor: '#3395ff',
  },
  {
    key: 's5',
    title: 'Работниците',
    textStyle: styles.text,
    titleStyle: styles.title,
    text: 'Менюто работници представлява списък, в който вие можете да създавате, преглеждате, редактирате и премахвате работници в зависимост от нуждите ви.',
    image: require('../../assets/images/intro/workers.jpg'),
    imageStyle: styles.image,
    backgroundColor: '#ffc107',
  },
  {
    key: 's6',
    title: 'График на работниците',
    textStyle: styles.text,
    titleStyle: styles.title,
    text: 'Графикът на работниците представлява календар, в който вие можете да отбелязвате работното време на работниците си и също така да проверявате кой от работниците ви кога е на работа.',
    image: require('../../assets/images/intro/calendar-clock.png'),
    imageStyle: styles.image,
    backgroundColor: '#008dc7',
  },
  {
    key: 's7',
    title: 'Отсъстващи работници',
    titleStyle: styles.title,
    textStyle: styles.text,
    text: 'Менюто съдържа календар с работници, като в него вие можете да добавяте и прегледжате отсъстващите работници и причините, по които ги няма.',
    image: require('../../assets/images/intro/absences.png'),
    imageStyle: styles.image,
    backgroundColor: '#FFA500',
  },
];

【问题讨论】:

  • 请将相关的代码部分放入您的问题中。干杯。
  • 一般来说,如果您的用户登录,请检查一个表格字段以确定是否应该播放介绍。或者,将他们的 IP 地址放在一个表中以执行相同的操作。
  • @d219 这是我的代码imgur.com/a/2e4uIwl
  • 如果您可以将其作为文本添加到您的问题中,那就太好了;它是 SO 上的首选格式(与屏幕截图相反),并且更有可能有人会回答您的问题。
  • @d219 好的,现在?

标签: database sqlite react-native


【解决方案1】:

一种方法是在加载屏幕上存储一个带有“AsyncStorage”的变量。如果为 false,则显示“AppIntro”,否则显示“Home”。

异步存储:https://facebook.github.io/react-native/docs/asyncstorage

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-01-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-09-13
    • 1970-01-01
    • 2019-04-26
    • 1970-01-01
    相关资源
    最近更新 更多