Question

如何仅显示一次我的应用程序简介？请给我显示示例，如果您可以使用SQLite数据库而不使用AsyncStorage。

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

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

/*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',
  },
];

Answer 1

一种方法是在加载屏幕上使用“ AsyncStorage”存储变量。如果为假，则显示“ AppIntro”，否则显示“ Home”。

AsyncStorage：https://facebook.github.io/react-native/docs/asyncstorage，

React Native-仅显示一次应用程序简介（第一次运行时-处于保留状态）

1 个答案: