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

【问题标题】：scrollview can't scroll when focus textinput react native当焦点文本输入反应本机时，滚动视图无法滚动
【发布时间】：2017-02-06 07:29:22
【问题描述】：

我在 ScrollView 中有一个 TextInput。

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

【问题讨论】：

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

标签： android-edittext react-native scrollview textinput react-native-scrollview

【解决方案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}。
你能看看这个吗？ stackoverflow.com/questions/63437251/…
@Jnl 我为您提供了解决方案。看看，如果您的问题得到解决，请告诉我

【解决方案2】：

在滚动视图中使用 keyboardShouldPersistTaps

<ScrollView keyboardShouldPersistTaps="handled">

解决你的问题

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

【讨论】：

很遗憾，这并不能解决 Android 上的问题。
你能看看这个吗？ stackoverflow.com/questions/63437251/…

【解决方案3】：

这是预期的行为。

欲了解更多信息Official TextInput documentation

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

【讨论】：

【解决方案4】：

我对@987654321@ 使用了简单的技巧，这对我来说是正确的。应该在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()

【讨论】：