reactjs - React Native，我不能在不关闭键盘的情况下点击

Question

Here is my phone screen我用 keyboardShouldPersistTaps 尝试了 ScrollView，但它没有用。我有一个用于自动完成建议的 ScrollView，当用户可以在那里输入时，他们也应该能够从建议中进行选择。但是，如果不关闭键盘，就我而言是不可能的。这是我的作品

       <ScrollView
              scrollEnabled={false}
              keyboardShouldPersistTaps={true}>

            <View style={{ maxHeight: 220 }}>
                 <ScrollView style={Style.suggestionContainer}
                      scrollEnabled={true} >        

                       {this.state.showOptions.map(this.renderSuggestions)}
                </ScrollView>
            </View>
      </ScrollView>
         .
         .
         .


       private renderSuggestions(option: MultiInputQuestionOption) {
            return (
            <TouchableOpacity onPress={this.addSelection.bind(this, option)} >
                <Text style={Style.suggestions}>
                    {option[this.props.titleKey]}
                </Text>
            </TouchableOpacity >
           )
      }

有什么可能的解决方案吗？

Answer 1

您需要在包含 TextInput 的 ScrollView 上传递键 keyboardShouldPersistTaps=‘handled’:-

<ScrollView keyboardShouldPersistTaps=‘handled’>
   ...
   <TextInput />
</ScrollView>

如果您在模态内部遇到问题，那么您需要在屏幕组件堆栈中的 All ScrollView 上传递键 keyboardShouldPersistTaps=‘handled’。在 Modal 的祖先/父级中也是如此。

比如我的情况:

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>
   )
}