React 本机键盘的高度改变了整个视图

Question

我的带有两个输入和一个按钮的布局在没有键盘的情况下也能很好地工作。但是只要我点击输入框，键盘就会出现并改变屏幕的高度。然后事情就错了。我已经尝试过使用键盘避免视图。但是错误仍然存​​在。

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;

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

Answer 1

发生这种情况是因为您使用 KeyboardAvoidingView 并将其中一种行为作为填充。因此，每当您单击 TextInput 时，它都会向视图添加底部填充，并且视图会向顶部移动。

如果您不希望它发生，请使用 View 标签而不是 KeyboardAvoidingView。