KeyboardAvoidingView не работает на Android, даже если поведение удалено

У меня проблема с KeyboardAvoidingView на android. Он отлично работает с iOS. У моего экрана есть компоненты просмотра в верхней половине экрана, которые могут или не могут влиять на него. Я пробовал удалить каждый из этих компонентов, но KeyboardAvoidingView работает только тогда, когда я удаляю компонент, занимающий 60% экрана. Этот компонент представляет собой проигрыватель YouTube от «react-native-youtube» в стиле flex: 1.

Мой код выглядит примерно так ...

<KeyboardAvoidingView
  behavior = "padding"
  keyboardVerticalOffset = {200}
>
  <View style = {styles.first}>
    <View style = {styles.second}>
      <TouchableHighlight />
      <View style = {styles.third}>
        <TextInput 
          style = {styles.textInput}
          maxLength = {80}
          autoGrow = {true}
          maxHeight = {130}
          multiline = {true}
          editable = {true}
          onChangeText = {onChange}
          value = {descriptionText}
          autoFocus = {true}
          keyboardType = {'default'}
          autoCorrect = {false}
          placeholder = {'Send a word'}
          underlineColorAndroid = {white}
          selectionColor = {purple}
          returnKeyType = {'send'}
          onSubmitEditing = {handleSubmit}
        />
      </View>
    </View>
  </View>
<KeyboardAvoidingView/>

first: {
  flexDirection: 'column',
  justifyContent: 'flex-start',
  position: 'relative',
  marginTop: 0,
},
second: {
  width: screenWidth,
  flexDirection: 'row',
  alignItems: 'center',
  paddingTop: 5,
  paddingBottom: 9,
},
third: {
  flexDirection: 'row',
  borderTopLeftRadius: 10,
  borderBottomLeftRadius: 10,
  paddingBottom: 5,
  paddingLeft: 10,
  paddingRight: 10,
  width: screenWidth - 102,
  minHeight: 36,
  alignItems: 'center',
},
textInput: {
  textAlign: 'left',
  fontSize: 14,
  fontWeight: '400',
  flex: 1,
  padding: 0,
  margin: 0,
}

Есть ли здесь что-нибудь, что может повлиять на функциональность KeyboardAvoidingView? Я уже пытался удалить behavior = "padding" из-за документов React Native, в которых упоминается, что он работает лучше на Android, когда эта опора удаляется.

Спасибо!

4
0
5 261
2

Ответы 2

Работа с клавиатурой может быть сложной.

Однако Android (на этот раз) действительно упрощает задачу.

import { Platform } from 'react-native';

const isAndroid = Platform.OS === 'android';

componentDidMount() {
  if (isAndroid) {
    SoftInputMode.set(SoftInputMode.ADJUST_PAN);
  }
}

нет, я зацепил SoftInputMode из github.com/MR03web/react-native-set-soft-input-mode, в котором я редактировал build.gradle, settings.gradle и mainapplication.java. я получаю ошибки после всего этого. Спасибо хоть!

Dres 25.04.2018 03:03

Попытайтесь добавить гибкость ко всем стилям, это может помочь, и, возможно, также в KeyboardAvoidingView.

<KeyboardAvoidingView
  style = {{flex: 1}}
  keyboardVerticalOffset = {0}
  behavior = {'padding'}
>

Выставка закусок: https://snack.expo.io/BJT-4Fphz

это тоже не сработало. попытался добавить flex: 1 в каждый вид вокруг него. затем удалил каждого по одному, и это не сработало :( thx tho! любые другие рекомендации были бы потрясающими

Dres 25.04.2018 03:04

@Dres, вы можете поиграть в моей закусочной ссылке выше.

aLIEz 25.04.2018 06:30

Благодарность! Так намного проще, чем перезагружать приложение, над которым я работаю. Я думаю, что содержимое верхней половины может вызывать такое ожидаемое поведение. я буду продолжать подключаться к нему!

Dres 26.04.2018 00:04

Другие вопросы по теме