react-native - 在按钮上打开 react-native Modal 单击操作表选项
问题描述
我正在使用 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() 并关闭操作表。但什么也没发生。
解决方案
这是因为 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'
},
}}
/>
我希望这会有所帮助....谢谢:)
推荐阅读
- c# - 清除键盘缓冲区或阻塞输入(C# 控制台)
- r - 如何在 R 的列中合并具有特定字符串匹配的两个数据框?
- kubernetes - 通过 kubectl 对正在运行的容器进行快照
- c++ - 在 Windows 10 上安装暗网
- c++ - 模式匹配 C++ 论文示例不起作用
- c++ - 通过将其拆分为线程来加快 for 循环
- c# - 如何在 C# 中读取此 XML?
- python - 使用 TFLiteConverter RuntimeError 将 Tensorflow (TF2) 量化为完整整数错误:操作尚不支持量化:'CUSTOM'
- python-3.x - 使用多处理并行化列表项附加到 dict
- pip - 如何强制 pip 安装编译它的包(无二进制)但使用以前的特定版本