Touchable Opacity 需要在键盘打开时点击两次才能提交 - 将 keyboardShouldPersistTaps 传递给 ScrollView 不起作用 - 新鲜的想法
Touchable Opacity Requires Two Taps to Submit When Keyboard Open - Passing keyboardShouldPersistTaps to ScrollView Does Not Work - Fresh Out Of Ideas
如果这似乎是一个重复的问题,请提前道歉。
问题已得到充分记录:我有一个视图组件。在该视图中,我有一个用作提交按钮的 TouchableOpacity。在 ScrollView 中我有一个 TextInput。当用户聚焦 TextInput 时,键盘打开。出于 UX 目的,我相信用户应该能够按下 TouchableOpacity 并且 TouchableOpacity 应该在第一次尝试时注册按下。这不是行为。第一次按下关闭键盘,然后用户必须再次按下 TouchableOpacity 才能提交 TextInput:
<View>
<Formik
initialValues={{ messageBody: '' }}
onSubmit={(values) => handleSubmitting(values)}>
{({ handleChange, handleSubmit, values }) => (
<View>
<TouchableOpacity
style={styles.appButtonContainer}
onPress={handleSubmit}>
<CustomIcon name="send" size={15}
style={styles.icon} />
</TouchableOpacity>
<ScrollView keyboardShouldPersistTaps='always'>
<TextInput
placeholder="Reply to post"
style={styles.newMessageBox}
value={values.messageBody}
onChangeText={handleChange('messageBody')}
/>
</ScrollView>
</View>
)}
</Formik>
</View>
我已经尝试过本文中提供的解决方案:https://medium.com/react-native-training/todays-react-native-tip-keyboard-issues-in-scrollview-8cfbeb92995b
同样的解决方案在 github 和堆栈溢出之间已经发布了十几次:将 keyboardShouldPersistTaps='always' 属性传递给 ScrollView。但它不起作用。我试过将道具传递给每个元素。我尝试将道具从 'always' 更改为 'handled',再更改为 true。我试过将 TouchableOpacity 和 TextInput 包装在 ScrollView 中。我试过将所有内容包装在 ScrollView 中。我试过取出 Formik。我试过将样式简化为骨架。我试过交换 TextInput 和 TouchableOpacity 的位置。没有任何效果。
非常感谢任何帮助。
2021 年 6 月 11 日更新
在我终于弄明白之前,我已经在这里和那里戳了一个月的大部分时间。我读到的大部分内容都暗示 keyboardShouldPersistTaps 道具应该放在 TextInput 的下一级组件上 - 在我的例子中是 ScrollView 组件。就我而言,这不是真的。
在我的例子中,keyboardShouldPersistTaps 道具必须不在下一个更高级别的组件上,而是在用户与之交互的最高级别组件上。对我来说,这是一个 SectionList,在每个 TextInput 中呈现。
当它起作用时,我差点心脏病发作。
正如上面编辑中提到的,在我终于弄明白之前,我已经在这里和那里戳了一个月的大部分时间。我读到的大部分内容都暗示 keyboardShouldPersistTaps 道具应该放在 TextInput 的下一级组件上 - 在我的例子中是 ScrollView 组件。就我而言,这不是真的。
在我的例子中,keyboardShouldPersistTaps 道具必须不在下一个更高级别的组件上,而是在用户与之交互的最高级别组件上。对我来说,这是一个 SectionList,在每个 TextInput 中呈现。
如果这似乎是一个重复的问题,请提前道歉。
问题已得到充分记录:我有一个视图组件。在该视图中,我有一个用作提交按钮的 TouchableOpacity。在 ScrollView 中我有一个 TextInput。当用户聚焦 TextInput 时,键盘打开。出于 UX 目的,我相信用户应该能够按下 TouchableOpacity 并且 TouchableOpacity 应该在第一次尝试时注册按下。这不是行为。第一次按下关闭键盘,然后用户必须再次按下 TouchableOpacity 才能提交 TextInput:
<View>
<Formik
initialValues={{ messageBody: '' }}
onSubmit={(values) => handleSubmitting(values)}>
{({ handleChange, handleSubmit, values }) => (
<View>
<TouchableOpacity
style={styles.appButtonContainer}
onPress={handleSubmit}>
<CustomIcon name="send" size={15}
style={styles.icon} />
</TouchableOpacity>
<ScrollView keyboardShouldPersistTaps='always'>
<TextInput
placeholder="Reply to post"
style={styles.newMessageBox}
value={values.messageBody}
onChangeText={handleChange('messageBody')}
/>
</ScrollView>
</View>
)}
</Formik>
</View>
我已经尝试过本文中提供的解决方案:https://medium.com/react-native-training/todays-react-native-tip-keyboard-issues-in-scrollview-8cfbeb92995b
同样的解决方案在 github 和堆栈溢出之间已经发布了十几次:将 keyboardShouldPersistTaps='always' 属性传递给 ScrollView。但它不起作用。我试过将道具传递给每个元素。我尝试将道具从 'always' 更改为 'handled',再更改为 true。我试过将 TouchableOpacity 和 TextInput 包装在 ScrollView 中。我试过将所有内容包装在 ScrollView 中。我试过取出 Formik。我试过将样式简化为骨架。我试过交换 TextInput 和 TouchableOpacity 的位置。没有任何效果。
非常感谢任何帮助。
2021 年 6 月 11 日更新
在我终于弄明白之前,我已经在这里和那里戳了一个月的大部分时间。我读到的大部分内容都暗示 keyboardShouldPersistTaps 道具应该放在 TextInput 的下一级组件上 - 在我的例子中是 ScrollView 组件。就我而言,这不是真的。
在我的例子中,keyboardShouldPersistTaps 道具必须不在下一个更高级别的组件上,而是在用户与之交互的最高级别组件上。对我来说,这是一个 SectionList,在每个 TextInput 中呈现。
当它起作用时,我差点心脏病发作。
正如上面编辑中提到的,在我终于弄明白之前,我已经在这里和那里戳了一个月的大部分时间。我读到的大部分内容都暗示 keyboardShouldPersistTaps 道具应该放在 TextInput 的下一级组件上 - 在我的例子中是 ScrollView 组件。就我而言,这不是真的。
在我的例子中,keyboardShouldPersistTaps 道具必须不在下一个更高级别的组件上,而是在用户与之交互的最高级别组件上。对我来说,这是一个 SectionList,在每个 TextInput 中呈现。