当我单击“是”时,没有任何答案,但应该打开操作表。 为什么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的输出。 我对本机反应没有丰富的经验,所以您能帮我解释一下它的工作原理吗。