在按钮上打开 react-native Modal 单击操作表选项

Posted 2023-02-16

【中文标题】在按钮上打开 react-native Modal 单击操作表选项

【英文标题】：Open react-native Modal on button click on actionsheet option

【发布时间】：2020-03-27 20:03:39

【问题描述】：

我正在使用 react-native-actionsheet 库。 当我单击操作表上的选项之一并想要关闭 react-native 操作表时，我想打开 react-native 模态。

是否有任何方法可以关闭操作表。

<ActionSheet
    ref=o => this.ActionSheet = o
    options=[
        (
            <TouchableOpacity style=styles.actionTextInline onPress=() => 
                this.openReservationModal(); this.ActionSheet.hide();
            >
                <Icon name="receipt" size=24 style= color: '#737373'  />
            </TouchableOpacity>
        ), (
            <TouchableOpacity style=styles.actionTextInline>
                <Icon name="call" size=24 style= color: '#737373'  />
            </TouchableOpacity>
        ), (
            <TouchableOpacity style=styles.actionTextInline onPress=() =>  alert("Hello friends !!") >
                <Icon name="message" size=24 style= color: '#737373'  />
            </TouchableOpacity>
        )
    ]
    cancelButtonIndex=2
    destructiveButtonIndex=-1
    styles=
        body: 
            flex: 1,
            backgroundColor: '#FFFFFF',
            borderRadius: 10,
            height: 100
        ,
        cancelButtonBox: 
            height: 50,
            backgroundColor: '#FFFFFF',
            paddingLeft: 16,
            paddingTop: 16,
            alignItems: 'flex-start'
        ,
        buttonBox: 
            height: 50,
            backgroundColor: '#FFFFFF',
            borderRadius: 10,
            paddingLeft: 16,
            paddingTop: 16,
            alignItems: 'flex-start'
        ,
    
/>

在上面的代码中，当我执行 onPress 时，想要调用 this.openReservationModal() 并关闭操作表。但什么也没发生。

【参考方案1】：

这是因为 react-native-actionsheet 在内部使用 react native modal 并且您在 onpress 上编写的语句是异步运行的，这就是没有任何反应的原因。 现在你必须对第二条语句使用超时，它会起作用，只需在你的 onpress 中使用下面的代码，它就会起作用：

代码：

<ActionSheet
    ref=o => this.ActionSheet = o
    options=[
        (
            <TouchableOpacity style=styles.actionTextInline onPress=() => 

                # ----- change here -------

                this.ActionSheet.hide();
                setTimeout(() => this.openReservationModal(), 1000)

                # ----- change here -------enter code here

            >
                <Icon name="receipt" size=24 style= color: '#737373'  />
            </TouchableOpacity>
        ), (
            <TouchableOpacity style=styles.actionTextInline>
                <Icon name="call" size=24 style= color: '#737373'  />
            </TouchableOpacity>
        ), (
            <TouchableOpacity style=styles.actionTextInline onPress=() =>  alert("Hello friends !!") >
                <Icon name="message" size=24 style= color: '#737373'  />
            </TouchableOpacity>
        )
    ]
    cancelButtonIndex=2
    destructiveButtonIndex=-1
    styles=
        body: 
            flex: 1,
            backgroundColor: '#FFFFFF',
            borderRadius: 10,
            height: 100
        ,
        cancelButtonBox: 
            height: 50,
            backgroundColor: '#FFFFFF',
            paddingLeft: 16,
            paddingTop: 16,
            alignItems: 'flex-start'
        ,
        buttonBox: 
            height: 50,
            backgroundColor: '#FFFFFF',
            borderRadius: 10,
            paddingLeft: 16,
            paddingTop: 16,
            alignItems: 'flex-start'
        ,
    
/>

我希望这会有所帮助....谢谢:)

【讨论】：

作为 *** 的新用户，如果它适合您，您应该接受并支持它.....谢谢 :)

@RaviShrinivasan 如果对您有用，请接受并投票赞成答案...谢谢:)

感谢您的回答。它正在使用设置超时