В моем реактивном коде не работает вид без клавиатуры

Я в тревоге. В моем коде не работает вид без клавиатуры. Я использую клавиатуру, избегая просмотра, но когда я заполняю пароль для подтверждения, тогда textInput будет сзади клавиатуры и не будет отображаться. пожалуйста, предложите мне лучший ответ для моего кода. Мой код: -

<SafeAreaView style = {{ flex: 1 }}>
    <View>
        <View>
            <Image source = {require('../img/LykaLogo.png')} style = {{ width: 100, height: 100 }} />

        </View>
    </View>
    <View >
    <KeyboardAvoidingView behavior='padding'>
        <View>
            <Text style = {{fontSize:15,}}>CREATE USER ACCOUNT</Text>
        </View>
        <View >
        <View >
        <TextInput
                placeholder='FULL NAME'
                inputStyle = {{fontSize:15}}               
            />
        </View>
        <View >
        <TextInput
                placeholder='USERNAME'
                inputStyle = {{fontSize:15}}               
            />
        </View>
        <View >
        <TextInput
                placeholder='EMAIL'
                inputStyle = {{fontSize:15}}               
            />
        </View>
        <View >
        <TextInput
                placeholder='PHONE'
                inputStyle = {{fontSize:15}}               
            />
        </View>
        <View >
        <TextInput
                placeholder='PASSWORD'
                inputStyle = {{fontSize:15}}               
            />
        </View>
        <View>
        <TextInput
                placeholder='CONFIRM  PASSWORD'
                inputStyle = {{fontSize:15}}               
            />
        </View>
        </View>
        </KeyboardAvoidingView>
    </View>
</SafeAreaView>
1
0
247
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я рекомендую вам вообще не использовать KeyboardAvoidingView для Android. Поведение клавиатуры по умолчанию в Android достаточно хорошее.

Вот пример того, как это сделать:

import { Platform } from 'react-native';

...

renderContent() {
  return (
    <View>
      ...
    </View>
  )
}

render() {
  return (
    <View>
      {Platform.OS === 'android' ? this.renderContent() :
        <KeyboardAvoidingView behavior='padding' enabled>
          {this.renderContent()}
        </KeyboardAvoidingView>}
    </View>
  );
}

Более короткое решение, которое также может вам подойти, — не устанавливать свойство behavior для Android. Установите его только для iOS:

import { Platform } from 'react-native';

...

render() {
  return (
    <View>
      <KeyboardAvoidingView behavior = {Platform.OS === 'android' ? '' : 'padding'} enabled>
        ...
      </KeyboardAvoidingView>
    </View>
  );
} 

Это из официальных документов, касающихся свойства behaviorKeyboardAvoidingView:

Android and iOS both interact with this prop differently. Android may behave better when given no behavior prop at all, whereas iOS is the opposite.

Источник

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