包含 TextInput 和 Button 时反应本机模式问题答案

【问题标题】：react native modal issue when containing TextInput and Button包含 TextInput 和 Button 时反应本机模式问题
【发布时间】：2017-08-22 20:56:15
【问题描述】：

复制步骤：

1) 使用 React Naitve 模态 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>
    );
  }
}

问题仍然存在 1) TextInput 或 FormInput 2) Button 或 TouchableOpacity 或任何类似的东西。

编辑：如果在 android 上单击返回（在屏幕底部；在主页按钮旁边），也会出现同样的问题。第一次键盘消失，第二次点击后退按钮->模态消失。

【问题讨论】：

你找到解决方案了吗..

标签： react-native

【解决方案1】：

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

<SectionList keyboardShouldPersistTaps="always"/>

解决了我的问题

同样的事情

<ScrollView>, <FlatList>

【讨论】：

我也试过了；不工作。我前段时间提出了一个问题：github.com/facebook/react-native/issues/15665

【解决方案2】：

您需要在屏幕组件堆栈中的 All 滚动视图上传递密钥 keyboardShouldPersistTaps=‘handled’。也在 Modal 的祖先/父级中。

就像我的情况：

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

在父类中：在 modal 的祖先所在的父类中。你需要通过keykeyboardShouldPersistTaps=‘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>
   )
}

【讨论】：

【解决方案3】：

先添加

<SectionList keyboardShouldPersistTaps="handled"/>

在你的 sectionList/FlatList/ScrollView 中

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

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

如果您导航到其他屏幕或关闭可能包含一些动画的模式，请使用以下代码进行子项点击

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

【讨论】：