当焦点文本输入反应本机时，滚动视图无法滚动

Posted 2023-04-18

【中文标题】当焦点文本输入反应本机时，滚动视图无法滚动

【英文标题】：scrollview can't scroll when focus textinput react native

【发布时间】：2017-02-06 07:29:22

【问题描述】：

我在 ScrollView 中有一个 TextInput。

当 TextInput 处于焦点时，滚动不起作用。此问题仅影响 android。

【问题讨论】：

你解决了这个问题吗？

我遇到了一个问题，结果证明这是因为我在 TextInput 的样式中指定了一个高度，但是 TextInput 的内容在 Android 中超过了该高度，但在 ios 中没有（因为系统字体覆盖了我的字体样式）。万一其他人遇到这个问题，可以通过删除硬编码高度或增加它来修复它，以确保它可以包含内容而不会溢出。

【参考方案1】：

设置

<ScrollView keyboardShouldPersistTaps="always"

结合下面的 textInput 组件（我为文本输入创建的自定义组件来解决这个问题）解决了我的问题：

<TouchableOpacity
     activeOpacity=1
     onPress=()=>this.input.focus()>
     <View pointerEvents="none"
           <TextInput
              ref = (input) => this.input = input
           />
     </View>
</TouchableOpacity>

【讨论】：

警告：此方法有效禁用文本选择，因此用户无法复制/粘贴或将光标置于文本中间。

@DavidJones 正是，这就是问题所在。你找到解决办法了吗？

（对不起，它不会让我@提及您的用户名，所以希望您能看到这个。）在我的情况下，这是由输入文本的对齐引起的 - 当文本出现问题时居中对齐或右对齐。这是一个已知的错误：（参见github.com/facebook/react-native/issues/25594 和github.com/facebook/react-native/issues/25594）。我知道的唯一解决方法是设置multiline=true。

你能看看这个吗？ ***.com/questions/63437251/…

@Jnl 我为您提供了解决方案。看看，如果您的问题得到解决，请告诉我

【参考方案2】：

在滚动视图中使用 keyboardShouldPersistTaps

<ScrollView keyboardShouldPersistTaps="handled">

解决你的问题

在此处查看文档https://facebook.github.io/react-native/docs/scrollview.html#keyboarddismissmode

【讨论】：

很遗憾，这并不能解决 Android 上的问题。

你能看看这个吗？ ***.com/questions/63437251/…

【参考方案3】：

这是预期的行为。

欲了解更多信息Official TextInput documentation

您可能想尝试这样的事情：react-native-kayboard-aware-scroll-view

【参考方案4】：

我对@9​​87654321@ 使用了简单的技巧，这对我来说是正确的。应该在TextInput 中添加这个prop：

<TextInput
      multiline=true
      numberOfLines=1
 />

【参考方案5】：

这是一个很好的例子：http://blog.arjun.io/react-native/mobile/cross-platform/2016/04/01/handling-the-keyboard-in-react-native.html

对我来说真正重要的是添加：

android:windowSoftInputMode="adjustResize"

在 AndroidManifest.xml 中以聚焦 textInput

【参考方案6】：

我以不同的方式处理每个平台（在 Ios 中专注于 inputText 就足够了， 不要忘记将 this.scrollViewRef ref 放入 ScrollView 中，该 ScrollView 包装 inputText 并将 ref 索引为 inputText

if (Platform.OS == 'android') 
    this.inputRefs[field].measure((w, h, px, py, xPage, yPage) => 
        this.scrollViewRef.scrollTo( x: 0, y: yPage, animated: true )
        this.inputRefs[field].focus()
    )
 
this.inputRefs[field].focus()