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

尝试删除fstream f; f.open("text1.txt", ios::out); char buf[50]; while (cin >> buf) // it becomes false when end of file reach. You can test it from keyboard by Ctrl+Z and then Enter { f<<buf<<endl; } f.close();中的value={this.state.answer}或将其注释掉。为我工作。

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

// 注意以上代码 //首先，将 KeyboardAvoidingView 与react native View组件包装在一起，如下所示，完成使用相对值 这样的百分比，实际上在键盘出现和损坏时提供帮助，请尝试使用上方显示的内容来编辑代码

键盘弹出时，如何使React-Native应用正常响应

2 个答案: