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

Question

我正在使用 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() 并关闭操作表。但什么也没发生。

Answer 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'
        },
    }}
/>

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