ScrollView не прокручивается до конца моих полей ввода

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 полей ввода ниже этого, и я закрыл просмотр и просмотр прокрутки

Iзаметил, что если я уменьшу высоту в представлении, оно будет работать, но мне не нравится это решение из-за разных размеров экранов телефона.

У меня также была проблема с отображением полосы прокрутки, этой полосы прокруткибыло с отступом вправо 20, поэтому я его спрятал.

Я не понимаю, почему он не просто настраивается на количество входов, которые у меня есть в моем View и ScrollView

Hopeкто-то может объяснить мне это.

Спасибо за ваше время

Answer 1

Попробуйте добавить contentContainerStyle = {{flexGrow: 1}} к вашему просмотру прокрутки в качестве реквизита.

Answer 2

Попробуйте дать flex:1 в styles.scrollView. Это может решить проблему для вас.

Answer 3

Использование реакции на родную клавиатуру и прокрутку экрана решило все мои проблемы.

Answer 4

В соответствии с вашим объяснением, я думаю, вы хотите знать о 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