Question

你好，我的滚动视图不会滚动到最后

<View style={styles.accountContainer}>
    <ScrollView
        styles={styles.scrollView}
        showsVerticalScrollIndicator={false}>

        <Input
            placeholder="Username"
            placeholderTextColor="black"
            inputStyle={{ color: "black" }}
            inputContainerStyle={{
                borderRadius: 10,
                backgroundColor: "transparent",
                borderBottomColor: "white",
                borderBottomWidth: 5,
                width: 300,
                marginBottom: 20
            }}
            label="Username"
            labelStyle={{ color: "white" }}
            onChangeText={username => this.setState({ username })}
            ref={input => {
                this.emptyInput1 = input;
            }}
            value={this.state.username}
        />
        ... 
        ...
    </ScrollView>
</View>

在此下方还有10个输入字段，并且我关闭了视图和滚动视图

我注意到，如果我降低View的高度，它会起作用，但是由于手机屏幕的尺寸不同，我不喜欢这种解决方案。

我在滚动条的显示上也遇到了一个问题，即滚动条的右填充值为20，所以我将其隐藏了。

我不明白为什么它不仅仅调整View和ScrollView中输入的数量

希望有人可以向我解释一下。

感谢您的时间

Answer 1

根据您的解释，我认为您想了解React Native中的KeyboardAvoidingView。这是一个解决视图常见问题的组件，该视图需要移开虚拟键盘。它可以根据键盘的位置自动调整其高度，位置或底部填充。

import {KeyboardAvoidingView} from 'react-native';

<ScrollView>
     <KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
        ... your UI ...
        //place your all inputs here
     </KeyboardAvoidingView>;
</ScrollView>

行为道具可以更改为

  1. height
  2. position
  3. padding

您可以根据自己的设计进行更改。

查看文档以了解更多信息-https://facebook.github.io/react-native/docs/0.60/keyboardavoidingview

Answer 2

尝试在pseudo-element中提供flex:1。它可能会为您解决问题。

Answer 3

使用react-native-keyboard-aware-scroll-view解决了我所有的问题。

Answer 4

尝试添加 contentContainerStyle = {{flexGrow: 1}} 到滚动视图作为道具。

ScrollView直到我输入字段的末尾才滚动

4 个答案: