Как заставить приложение React-Native изящно реагировать при всплывающей клавиатуре?

Question

Я следовал учебному пособию по этой ссылке: https://medium.freecodecamp.org/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580, но когда я нажимаю на вход, я не могу ничего сделать, даже написать текст.Я не знаю почему, не могли бы вы помочь, пожалуйста?

Это мой код:

import React, {PureComponent} from 'react';
import {View, Text, TextInput,KeyboardAvoidingView} from 'react-native';
import {Button,Input,Bubble,ThemeProvider} from 'nachos-ui';

import PropTypes from 'prop-types';


class AddPost extends PureComponent {

  static propTypes = {
    componentId: PropTypes.string,
    text:PropTypes.string
  }

  constructor(props) {
    super(props);
    this.state = {
      answer : ''
    };
  }


  render() {
    const bubbleStyle = { marginBottom: 15,marginLeft: 20,width: '80%'  };
    const inputStyle = { margin: 15,marginVertical: '80%' };
    return (

         <KeyboardAvoidingView
      behavior="padding">
            <ThemeProvider>


        <View style={{ marginVertical:15 , flex : 1 }}>
          <Bubble style={bubbleStyle}>
              Hello, welcome back, you have 
              do you want to read mails ?
          </Bubble>
          <Input
          style={inputStyle}
          placeholder='Your answer'
          value={this.state.answer}
          onChangeText={answer => this.setState({ answer })}
        />

        </View>

      </ThemeProvider>
    </KeyboardAvoidingView>

    );
  }
}

export default AddPost;

Я обновил код, чтобы быть таким, но когда я пытаюсь поведение = "padding"или поведение = "высота" не работает

return (
      <ThemeProvider>
        <View style={{ marginVertical: 15, flex: 1 }}>
          <KeyboardAvoidingView behavior="position">
            <Bubble style={bubbleStyle}>
              Hello, welcome back, you have do you want to read mails ?
            </Bubble>
            <Input
              style={inputStyle}
              placeholder="Your answer"
              value={this.state.answer}
              onChangeText={answer => this.setState({ answer })}
            />
          </KeyboardAvoidingView>
        </View>
      </ThemeProvider>
    );

Answer 1

<View style={[CommonStyles.cardStyle, { padding: 8, **marginTop: '15%', marginBottom: "15%", }]}>**

                {
                    this.renderTextInput("UPI Address", "upi_id", "912xxxxxxx@xxx.com", 17, "default", {})
                }
                <Text style={{color:'black',textAlign:'center', fontWeight: 'bold',fontSize:20}}>or</Text>
                {
                    this.renderTextInput("Account Number", "bank_acc_no", "14xxxxxxx789", 12, "default", {})
                }
                {
                    this.renderTextInput("Ifsc Code", "ifsc_code", "SBIN000xxxx", 11, "default", {})
                }
                {
                    this.renderTextInput("Account Holder Name", "acc_holder_name", "AbXXXXXcd", 30, "default", {})
                }
                <Text style={{ textAlign: 'center', marginTop: 24, marginBottom: 32, }}>{AddVehicleStringMap.note}</Text>
    </View>

// ПРИМЕЧАНИЕ ДЛЯ ВЫШЕГО КОДА // Во-первых, оберните KeyboardAvoidingView с компонентом реагирования собственного представления, как вы сделали используйте относительные значения такой процент , как показано ниже, который действительно помогает вам, когда клавиатура появляется и исчезает, попробуйте отредактировать ваш код с помощью чего-то, показанного выше

Answer 2

Попробуйте удалить или закомментировать value={this.state.answer} в Input. у меня работает.