Клавиатура перекрывает нижнюю кнопку до обновления экрана - PullRequest
0 голосов
/ 23 января 2019

У меня есть следующий компонент: ScrollView с TextInput и Button. Я хочу, чтобы TextInput вверху и Button внизу (justifyContent: 'space-between'). Я запускаю этот компонент из приложения Android Native. Итак, я работаю над гибридным приложением .
Выпуск:
Когда я нажимаю на TextInput, появляется клавиатура, которая перекрывает нижнюю button. Если после этого я обновлю scrollView, потянув вниз, над клавиатурой появится нижняя строка button (что я хочу).
Что-то происходит после рендеринга RefreshControl, который устанавливает правильную позицию моего button. Но мой компонент выглядит не очень хорошо, пока я не потяну, чтобы обновить его, и активированный компонент RefreshControl активируется.

Мой код:

import React, { Component } from 'react';
import { View, KeyboardAvoidingView, TextInput, RefreshControl, Button, ScrollView } from 'react-native';

export default class Authenticate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false
    };
  }

  render() {
    return (
      <KeyboardAvoidingView enabled style={{ flex: 1 }}>
        <ScrollView
          contentContainerStyle={{ flex: 1, backgroundColor: 'gray', justifyContent: 'space-between' }}
          refreshControl={<RefreshControl refreshing={this.state.refreshing} />}>
          <View style={{ height: 200, backgroundColor: 'red' }}>
            <TextInput
              style={{
                height: 60,
                color: 'white',
                backgroundColor: 'gray',
                fontSize: 20,
                textAlign: 'center'
              }}
              value="Press Me"
            />
          </View>
          <Button style={{ backgroundColor: 'blue', width: '100%' }} title="Footer button" />
        </ScrollView>
      </KeyboardAvoidingView>
    );
  }
}

App

Ответы [ 4 ]

0 голосов
/ 23 января 2019

Как подсказывает MD Naseem Ashraf, проблема была решена путем добавления следующей строки в мой файл манифеста android:windowSoftInputMode="adjustResize"

0 голосов
/ 23 января 2019

Добавьте это в тег активности в файле манифеста

 android:windowSoftInputMode="adjustPan" 
0 голосов
/ 23 января 2019

<KeyboardAvoidingView> Заменить на <SafeAreaView> и дать ему изгиб 1.

0 голосов
/ 23 января 2019
  Try this if you want to hide button and then it won't come above keyboard.Change your  AndroidManifest.xml file.
    <activity
                    android:name=".MainActivity"
                    android:label="@string/app_name"
                    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
                    android:screenOrientation="portrait"
                    android:launchMode="singleTop"
                    android:windowSoftInputMode="adjustPan" //add this line
                    android:exported="true">
...