React Native，我无法在不关闭键盘的情况下点击答案

【问题标题】：React Native, I can't tap without closing keyboardReact Native，我无法在不关闭键盘的情况下点击
【发布时间】：2018-01-23 13:19:24
【问题描述】：

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

有什么可能的解决办法吗？

【问题讨论】：

为什么会有两个滚动视图组件？试一试
这个错误有什么好运气吗？

标签： reactjs react-native keyboard

【解决方案1】：

您需要在包含 TextInput 的滚动视图上传递密钥 keyboardShouldPersistTaps=‘handled’：-

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

如果您在模式内部遇到问题，那么您需要在屏幕组件堆栈中的 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>
   )
}

【讨论】：

【解决方案2】：

尝试添加 keyboardShouldPersistTaps={'always'} 到第二个 ScrollView 也是如此。

【讨论】：

你能上传一个屏幕截图，以便我更好地了解你想要实现的目标吗？
我编辑了我的问题并在那里添加了屏幕截图。我有一个自动完成组件。在我的核心屏幕中，顶部有一个按钮。如果您按下该按钮，则会打开一个模式，您会看到该屏幕。在模态中，您可以在 TextInput 组件中编写。输入一些内容后，您可以在文本输入下方看到并选择一个建议。我想在不关闭键盘的情况下选择建议。当我点击 TouchableOpacitied 文本时，键盘应该保留在那里。
嗯，如果 scrollEnable 为 false，为什么你会有滚动视图？
你尝试用常规视图替换外部 ScrollView 吗？
不要再将此设置为 true。将其设置为“始终”

【解决方案3】：

对keyboardShouldPersistTaps 属性使用'handled' 值，因为不推荐使用true 值。在两个ScrollViews 中使用keyboardShouldPersistTaps 并使用Keyboard.dismiss() 函数在其他地方处理您的键盘状态。

【讨论】：