showActionSheet在自定义SnackBar中不起作用

时间:2019-08-23 11:34:47

标签: javascript react-native

当我单击“是”时,没有任何答案,但应该打开操作表。 为什么showActionSheet不起作用? 我在哪里遇到问题以及如何解决?

我尝试了另一本带有操作表的课程,但是它也不起作用。

import React, { Component } from "react";
import { StyleSheet, Text, View, Animated, } from "react-native";
import ActionSheet from 'react-native-actionsheet'

const CANCEL_INDEX = 0
const DESTRUCTIVE_INDEX = 4
const options = [ 'Cancel', 'Apple', 'Banana', 'Watermelon', 'Durian' ]
const title = 'Which one do you like ?'

class SnackBar extends Component
{
   constructor() {
   super();
   state = {
    selected: ''
  }


  handlePress = (buttonIndex) => {
    this.setState({ selected: buttonIndex })
  }
   this.animatedValue = new Animated.Value(50);
   this.ShowSnackBar = false;
   this.HideSnackBar = true;
   this.state = {
     SnackBarInsideMsgHolder: ''
   };
 }

  ShowSnackBarFunction(SnackBarInsideMsgHolder="Default SnackBar Message...", duration=3000)
  {
    if( this.ShowSnackBar === false )
    {
      this.setState({ SnackBarInsideMsgHolder: SnackBarInsideMsgHolder });

      this.ShowSnackBar = true;

      Animated.timing
      (
          this.animatedValue,
          {
              toValue: -34,
              duration: 400
          }
      ).start(this.hide(duration));
    }
  }

    hide = (duration) =>
    {
      this.timerID = setTimeout(() =>
      {
        if(this.HideSnackBar === true)
        {
            this.HideSnackBar = false;

            Animated.timing
            (
              this.animatedValue,
              {
                toValue: 50,
                duration: 400
              }
            ).start(() =>
            {
              this.HideSnackBar = true;
              this.ShowSnackBar = false;
              clearTimeout(this.timerID);
            })
        }
      }, 10000);
    }

    SnackBarCloseFunction = () =>
    {
      if(this.HideSnackBar === true)
      {
          this.HideSnackBar = false;
          clearTimeout(this.timerID);

          Animated.timing
          (
              this.animatedValue,
              {
                toValue: 50,
                duration: 400
              }
          ).start(() =>
          {
              this.ShowSnackBar = false;
              this.HideSnackBar = true;
          });
      }
    }
    showActionSheet = () => {
      if(this.HideSnackBar === true)
      {
          this.HideSnackBar = false;
          clearTimeout(this.timerID);

          Animated.timing
          (
              this.animatedValue,
              {
                toValue: 50,
                duration: 400
              }
          ).start(() =>
          {
              this.ShowSnackBar = false;
              this.HideSnackBar = true;
              this.ActionSheet.show()

          });
      }

    };
    render()
    {
      return(
         <Animated.View style = {[{ transform: [{ translateY: this.animatedValue }]}, styles.SnackBarContainter ]}>

            <Text numberOfLines = { 1 } style = { styles.SnackBarMessage }>{ this.state.SnackBarInsideMsgHolder }</Text>
            <Text style = { styles.SnackBarYESText} onPress={this.showActionSheet} > YES </Text>
            <Text style = { styles.SnackBarNOText} onPress = { this.SnackBarCloseFunction } > NO </Text>
             <ActionSheet
                ref={o => { this.ActionSheet = o }}
                title={title}
                options={options}
                cancelButtonIndex={CANCEL_INDEX}
                // destructiveButtonIndex={DESTRUCTIVE_INDEX}
                onPress={this.handlePress}
            />
         </Animated.View>


      );
    } 
}

我希望单击“是”以打开ActionSheet的输出。 我对本机反应没有丰富的经验,所以您能帮我解释一下它的工作原理吗。

0 个答案:

没有答案