reactjs React native keyboard的高度改变了整个视图

f87krz0w  于 5个月前  发布在  React
关注(0)|答案(2)|浏览(88)

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

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;

字符串
x1c 0d1x的数据
我是初学者,如果您能给我给予一些讲解的话,谢谢!

shstlldc

shstlldc1#

这是因为你使用了KeyboardAvoidingView,其中一个行为是padding。所以每当你点击TextInput时,它会向视图添加底部填充,视图会向顶部移动。
如果你不想让它发生,使用View标签而不是KeyboardAvoidingView。

34gzjxbg

34gzjxbg2#

下面的解决方案对我很有效。android:windowSoftInputMode=“adjustResize”

android:windowSoftInputMode=“adjustPan”
在您的android/app/src/main/Android.Manifest.xml
进行这些更改后重新启动项目

相关问题