复制步骤:
1) 使用 React Naitve modal 2) Modal 包含 TextInput 和一个按钮 3) 在 TextInput 中输入一些文本并单击按钮 4) 在第一次单击时什么也没有发生。关键字消失 5) 在第二次点击时,文本被发送回给调用此模态的人。
class ReplyModal extends Component <Props, State> {
state = { modalVisible: false, reply: '' };
setModalVisible(visible) {
this.setState({ modalVisible: visible });
}
componentDidMount() {
this.setState({ modalVisible: this.props.modalVisible });
}
componentWillReceiveProps(nextProps) {
this.setState({ modalVisible: nextProps.modalVisible });
}
onSubmitReply = () => {
this.setState({ modalVisible: false });
this.props.onSubmitReply(this.state.reply);
}
render() {
return (
<Modal
animationType={'slide'}
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {
alert("your data is saved.");
}}
>
<View style={styles.modalViewOuter}>
<View style={styles.modalViewInner}>
<View style={{ flexDirection: 'row', justifyContent:'flex-end' }}>
<TouchableOpacity onPress={() => this.setState({ modalVisible: false })} >
<MaterialIcons name="close" color="grey" size={25} />
</TouchableOpacity>
</View>
<FormInput value={this.state.reply}
placeholder="Reply to the comment"
onChangeText={(reply) => this.setState({ reply })}
/>
<Button
backgroundColor="#03A9F4"
buttonStyle={{ borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0 }}
title='Submit Reply'
onPress={this.onSubmitReply}
/>
</View>
</View>
</Modal>
);
}
}
Run Code Online (Sandbox Code Playgroud)
问题仍然存在 1) TextInput 或 FormInput 2) Button 或 TouchableOpacity 或任何类似的东西。
编辑:如果在 android 上我点击返回(在屏幕底部;在主页按钮旁边),也会出现同样的问题。第一次键盘消失,第二次点击后退按钮 -> 模态消失。
我遇到了这个问题,但实际上是由<SectionList>. 添加
<SectionList keyboardShouldPersistTaps="always"/>
Run Code Online (Sandbox Code Playgroud)
解决了我的问题
同样的事情去
<ScrollView>,<FlatList>
| 归档时间: |
|
| 查看次数: |
6200 次 |
| 最近记录: |