当键盘弹出时，如何使 React-Native 应用程序优雅地响应答案

【问题标题】：How can I make React-Native app respond gracefully when the keyboard pops up当键盘弹出时，如何使 React-Native 应用程序优雅地响应
【发布时间】：2019-09-03 09:05:42
【问题描述】：

我按照此链接中的教程进行操作：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>
    );

【问题讨论】：

标签： javascript react-native keyboard

【解决方案1】：

尝试删除或注释掉 value={this.state.answer} 中的 Input 。对我有用。

【讨论】：

【解决方案2】：

<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>

//以上代码注意事项 //首先用 react native View 组件包裹 KeyboardAvoidingView 就像你做的那样使用相对值 这样的百分比，如下图，确实在键盘出现和消散时帮助您，尝试使用上面显示的内容编辑您的代码

【讨论】：