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

Question

我在 ScrollView 中有一个 TextInput。

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

Answer 1

这是预期的行为。

更多信息Official TextInput documentation

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

Answer 2

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

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

android:windowSoftInputMode="adjustResize"

in AndroidManifest.xml 以便聚焦 textInput

Answer 3

在 scrollView 中使用 keyboardShouldPersistTaps

<ScrollView keyboardShouldPersistTaps="handled">

它解决了你的问题

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

Answer 4

设置

<ScrollView keyboardShouldPersistTaps="always"

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

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

Answer 5

我以不同的方式处理每个平台（Ios 专注于 inputText 就足够了，不要忘记将 this.scrollViewRef ref 放入包装 inputText 的 ScrollView 中，并将 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()

Answer 6

我对 TextInput 使用了简单的技巧并且对我来说正确。应该在 TextInput 中添加这个 prop :

<TextInput
      multiline={true}
      numberOfLines={1}
 />

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

scrollview can't scroll when focus textinput react native

textinput

scrollview

android-edittext

react-native

react-native-scrollview