反应本机键盘的高度会改变整个视图

时间:2020-05-27 15:33:26

标签: android reactjs react-native jsx

我的布局具有两个输入和一个按钮,无需键盘即可很好地工作。但是,一旦我单击输入框,键盘就会出现并改变屏幕的高度。然后事情就错了。我已经尝试使用键盘避免视图。但是错误仍然存​​在。

import {
  StyleSheet,
  Text,
  View,
  TextInput,
  Button,
  KeyboardAvoidingView,
} from 'react-native';
import {  Formik} from 'formik'; 
import React, { Component } from 'react';
class Demo extends Component {

    render(){

  return (
    <KeyboardAvoidingView style={styles.container} behavior= "position , padding , height">
      <View style={styles.container}> 
        <Text style={styles.titleText}>Profile settings</Text> 
        <View style={styles.card}>
              <Formik
                initialValues={{
                  name: '',
                  mobile: '',
                }}
                onSubmit={(values) => {
                  console.log(JSON.stringify(values));
                }}>
                {(props) => (
                  <View>
                    <TextInput
                      placeholder={'name'}
                      onChangeText={props.handleChange('name')}
                      value={props.values.name}
                      style={styles.cardTextSmall}
                    />

                    <TextInput
                      placeholder={'email'}
                      onChangeText={props.handleChange('mobile')}
                      value={props.values.mobile}
                      style={styles.cardTextSmall}
                    />

                    <Button 
                    title={'submit'}
                    />
                  </View>
                )}
              </Formik>

              <View style={styles.centerButton}></View>
            </View>
      </View>
    </KeyboardAvoidingView>
  );
}; 
}

const styles = StyleSheet.create({  
  centerButton: {
    top: '1%',
    alignContent: 'center',
    alignItems: 'center',
  },
  titleText: {
    fontFamily: 'Segoe UI',
    fontSize: 30,
    position: 'relative',
    left: '7%',
    top: 72,
  },

  cardContent: {
    paddingHorizontal: '10%',
    marginHorizontal: 10,
  },

  cardTextLarge: {
    paddingTop: '15%',
    fontSize: 18,
    color: '#A6A6A6',
    fontFamily: 'Segoe UI',
  },

  cardTextSmall: {
    borderBottomColor: 'black',
    borderBottomWidth: 1,
    fontFamily: 'Segoe UI',
    fontSize: 18,
    color: '#404040',
  },

  cardTextModule: {
    paddingLeft: '15%',
    paddingTop: '2%',
    fontFamily: 'Segoe UI',
    fontSize: 18,
    width: '100%',
    color: '#404040',
  },

  card: {
    borderRadius: 6,
    backgroundColor: 'red',
    shadowOpacity: 0.3,
    shadowOffset: {width: 1, height: 1},
    marginHorizontal: 4,
    left: '6.5%',
    top: '19%',
    height: '78%',
    width: '85%',
    margin: 'auto',
    position: 'relative',
    zIndex: -1,
  },
});

export default Demo;

enter image description here

我是这里的初学者。如果可以的话,请给我一些解释。谢谢!

1 个答案:

答案 0 :(得分:1)

之所以发生这种情况,是因为您使用了KeyboardAvoidingView并将其中一种行为用作填充。因此,每当您单击TextInput时,它将在视图中添加底部填充,并且视图将移至顶部。

如果您不希望发生这种情况,请使用View标记而不是KeyboardAvoidingView。