当键盘弹出时，如何使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;

我更新了这样的代码，但是当我尝试behavior =“ padding”或behavior =“ height”时，它不起作用

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

尝试删除或注释掉value={this.state.answer}在Input。为我工作。

Answer 2

<View style={[CommonStyles.cardStyle, { padding: 8, **marginTop: '15%', marginBottom: "15%", }]}>**&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.renderTextInput("UPI Address", "upi_id", "[e-mail]", 17, "default", {})&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={{color:'black',textAlign:'center', fontWeight: 'bold',fontSize:20}}>or</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.renderTextInput("Account Number", "bank_acc_no", "14xxxxxxx789", 12, "default", {})&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.renderTextInput("Ifsc Code", "ifsc_code", "SBIN000xxxx", 11, "default", {})&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.renderTextInput("Account Holder Name", "acc_holder_name", "AbXXXXXcd", 30, "default", {})&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={{ textAlign: 'center', marginTop: 24, marginBottom: 32, }}>{AddVehicleStringMap.note}</Text>&nbsp; &nbsp; </View>//注意以上代码 //首先，将带有响应本机View组件的KeyboardAvoidingView包裹起来，因为您已经使用 了如下所示的百分比等相对值，这确实有助于您在键盘出现和损坏时尝试用所示的代码编辑代码以上