React Native，如果不关闭键盘我就无法点击

Question

我尝试了ScrollView和keyboardShouldPersistTaps，但它不起作用。我有一个用于自动完成建议的 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 的滚动视图上传递键

keyboardShouldPersistTaps=‘handled’

：-

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

如果您在模式内部遇到问题，那么您需要在屏幕组件堆栈中的

keyboardShouldPersistTaps=‘handled’

滚动视图上传递键

All

。也在 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>
   )
}

Answer 2

尝试添加

keyboardShouldPersistTaps={'always'}

也到第二个 ScrollView。

Answer 3

对

'handled'

属性使用

keyboardShouldPersistTaps

值，因为

true

值已弃用。在两个

keyboardShouldPersistTaps

中使用

ScrollView

，并使用

Keyboard.dismiss()

函数在其他地方处理键盘状态。

Answer 4

在我的例子中，我在 Flatlist 中有 Scrollview，所以我必须添加

keyboardShouldPersistTaps={'handled'} 在 Flatlist 中。

<FlatList
       horizontal
       scrollEnabled={false} 
       keyboardShouldPersistTaps="handled">
               <ScrollView
                      keyboardShouldPersistTaps="handled">
               </ScrollView>    
 </FlatList>
              
              

现在工作正常。