KeyboardAvoidingView не работает должным образом

Я пытаюсь использовать KeyboardAvoidingView с behavior="padding".

По какой-то причине, когда я пытаюсь ввести любой текст в TextInput, под TextInput есть пробел. Приложено изображение того, что происходит, а также код. Есть ли у кого-нибудь шанс понять, что здесь происходит?

  render() {
    return (

      <KeyboardAvoidingView  style={{ flex: 1}}  behavior="padding">
      < View
          style={{
            flex: 1,

          backgroundColor: "#FFFFFF",

        }}
      >

        <ScrollView
          contentContainerStyle={{ justifyContent: "flex-end", flex: 1 }}>
                <ChatInfo />
              </ScrollView>


          <View style={styles.container}>
          <TextInput
            style={styles.input}
            underlineColorAndroid="transparent"
            autoCapitalize="none"
            onChangeText={text => this.setState({ text: text })}
            value={this.state.text}
          />

          <TouchableOpacity
            style={styles.submitButton}
            onPress={this.submitName}
          >
            <Text style={styles.submitButtonText}> SEND </Text>
          </TouchableOpacity>
        </View>

      </ View>
      </KeyboardAvoidingView>
    );
  }
}

export default connect()(ChatScreen);

const styles = StyleSheet.create({
  input: {
    margin: 2,
    paddingLeft: 15,
    flex: 1,
    height: 40,
    padding: 10,
    fontSize: 14,
    fontWeight: "400"
  },

      container: {
        borderTopWidth: 1,
        minWidth: "100%",
        borderColor: "#cccccc",
        height: 44,
        flexDirection: "row",
        justifyContent: "space-between",
        backgroundColor: "#fff"

      },

  submitButtonText: {
    color: "#0a9ffc",
    fontSize: 14,
    fontWeight: "500"
  },

  submitButton: {
    backgroundColor: "#fff",
    padding: 10,
    margin: 2,
    height: 40,
    alignItems: "center",
    justifyContent: "center"
  }
});

Ответы

Ответ 1

Если вы используете интерактивную навигацию, на это влияет заголовок реакции-навигации. Высота заголовка зависит от разных мобильных экранов. Таким образом, вы должны получить высоту заголовка и перейти в реквизиты клавиатуры VerticalOffset.

import { Header } from 'react-navigation';

<KeyboardAvoidingView
  keyboardVerticalOffset = {Header.HEIGHT + 20} // adjust the value here if you need more padding
  style = {{ flex: 1 }}
  behavior = "padding" >

  <ScrollView>
    <TextInput/>
    <TextInput/>
    <TextInput/>
    <TextInput/>
    <TextInput/>
    <TextInput/>
  </ScrollView> 

</KeyboardAvoidingView>

Ответ 2

Это известная проблема с KeyboardAvoidingView и Android. Существует несколько способов решения этой проблемы.

React Собственная документация говорит:

Android может вести себя лучше, если вообще не использовать поведение, тогда как iOS противоположна.

Итак, если вы работаете только с Android, вы можете удалить поведенческую поддержку, и она должна работать сразу. Для достижения наилучших результатов добавьте android:windowSoftInputMode="adjustResize" к вашему манифесту.

В качестве альтернативы вы можете указать значение смещения, которое работает для вас примерно так: KeyboardAvoidingView keyboardVerticalOffset={-500} behavior="padding"

Для ios делать то же самое условно:

behavior= {(Platform.OS === 'ios')? "padding" : null}

keyboardVerticalOffset={Platform.select({ios: 0, android: 500})}

Ответ 3

ПРЕДУПРЕЖДЕНИЕ

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

ТЛ; др

Удалить android:windowSoftInputMode="adjustResize" из AndroidManifest.xml

До

...
<activity
  android:name=".MainActivity"
  android:label="@string/app_name"  
  android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
  android:windowSoftInputMode="adjustResize"
  >
...

После

...
<activity
  android:name=".MainActivity"
  android:label="@string/app_name"  
  android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
  >
...

Зачем

Если я правильно понимаю проблему, я имею дело с тем же. Имея android:windowSoftInputMode="adjustResize" в манифесте, система Android попытается выполнить ту же работу, что и KeyboardAvoidingView. Это приводит к добавлению дополнительного интервала над клавиатурой только на Android.

Если вы работаете на обеих платформах, вам придется иметь дело с этим на iOS каждый раз, когда вы работаете с клавиатурным вводом, поэтому лучше всего удалить специфическое поведение android:windowSoftInputMode="adjustResize" из манифеста и каждый раз использовать KeyboardAvoidingView,

Ответ 4

KeyboardAvoidingView должен быть ScrollView, а не наоборот. Таким образом, он ведет себя нормально (нормально, для каких целей я его использую). Попробуйте и дайте мне знать, как все прошло.

<ScrollView>
    <KeyboardAvoidingView styles={styles.container} behavior='padding'>

    </KeyboardAvoidingView>
</ScrollView>

Ответ 5

<KeyboardAvoidingView styles={styles.container} behavior = 'padding'  enabled>
   <ScrollView>

        <View>
          ....
        </View>

   </ScrollView>
</KeyboardAvoidingView>

Ответ 6

Я думаю, что это потому, что поведение поддерживает значение, поэтому я думаю, что добавление этой строки в клавиатуре AvoidView поможет

<KeyboardAvoidingView
    style = {{ flex: 1 }}
    behavior={Platform.OS === "ios" ? "padding" : null}>
</KeyboardAvoidingView>