Question

复制步骤：

1）使用React Naitve模态 2）Modal包含TextInput和一个按钮 3）在TextInput中输入一些文本，然后单击按钮 4）第一次点击没有任何反应。 Keywoard刚刚消失 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>
    );
  }
}

问题仍然存在，1）TextInput或FormInput 2）Button或TouchableOpacity或类似的东西。

编辑：如果在android上我点击返回（在屏幕底部;在主页按钮旁边），则会出现同样的问题。第一次键盘消失，第二次点击后退按钮 - ＆gt;莫代尔消失了。

Answer 1

我遇到了这个问题，但实际上是由<SectionList>引起的。添加

<SectionList keyboardShouldPersistTaps="always"/>

解决了我的问题

同样的事情

<ScrollView>，<FlatList>

Answer 2

您需要在屏幕的组件堆栈中传递keyboardShouldPersistTaps=‘handled’滚动视图上的键All。在模态的祖先/父母中。

就我而言：

const CountryModal=(props)=>{
 return(
   <Modal
     visible={props.visible}
     transparent={false}
     {...props}
   >
    <ScrollView keyboardShouldPersistTaps=‘handled’> 
      …
    </ScrollView>
   />
  )
 }

在父班：在父类中有模态的祖先。您需要传递键keyboardShouldPersistTaps =“ handled”`。

class Parent extends Component{
  render(){
    return(
    <ScrollView keyboardShouldPersistTaps=‘handled’> // pass ‘handled’ here also
      …
     <CountryModal />  // Its the same modal being used as a component in parent class.
    </ScrollView>
   )
}

Answer 3

首先添加

<SectionList keyboardShouldPersistTaps="handled"/>

在您的sectionList / FlatList / ScrollView中

然后在子视图或渲染项目视图中，如下所示关闭键盘

 onPressListItem = () => {
    Keyboard.dismiss();
}

如果您导航到其他屏幕或关闭可能包含某些动画的模态，请为子项单击以下代码

 onPressListItem = () => {
    Keyboard.dismiss();
    setTimeout(() => {
   // your navigation or any action here
  }, 0);
}

包含TextInput和Button时会反应本机模态问题

3 个答案: