Question

我在ScrollView中使用了许多TextInput。我想要当焦点在TextInput上时，然后自动滚动到此TextInput。我的代码如下：

<View style = {{width: '100%', height: '85%'}}>
    <ScrollView showsVerticalScrollIndicator = {false} style = {{marginLeft: 10, marginRight: 10}} 
        keyboardShouldPersistTaps={true}
    >
        <KeyboardAvoidingView behavior={'padding'}>
            <View style = {styles.input_box}>
                <TextInput underlineColorAndroid = 'transparent' style = {styles.input_style}/>
            </View>
            <View style = {styles.input_box}>
                <TextInput underlineColorAndroid = 'transparent' style = {styles.input_style}/>
            </View>

            ... ... ...

            <View style = {styles.input_box}>
                <TextInput underlineColorAndroid = 'transparent' style = {styles.input_style}/>
            </View>
        </KeyboardAvoidingView>
    </ScrollView>

</View>

当我点击TextInput时，不要自动滚动到此TextInput组件。因此，当点击下部的TextInput时，键盘将覆盖此TextInput组件。因此，用户必须向上滚动才能看到此TextInput组件。

请任何知道解决此问题方法的人来帮助我。非常感谢。

Answer 1

您可以使用KeyboardAvoidingView：它是用于解决视图的常见问题的视图，这些视图需要移开虚拟键盘的方式。它可以根据键盘高度自动调整其高度，位置或底部填充。

只需用

包装ScrollView

https://reactnative.dev/docs/keyboardavoidingview

在React Native中将焦点放在scrollview中的TextInput上时自动滚动

1 个答案: