Высота собственной клавиатуры React изменяет весь вид - PullRequest
Новая
       36

Высота собственной клавиатуры React изменяет весь вид

0 голосов
/ 27 мая 2020

Моя раскладка с двумя входами и кнопкой работает без клавиатуры. Но как только я щелкнул поле ввода, появляется клавиатура и меняет высоту экрана. Тогда все идет не так. Я уже пробовал использовать клавиатуру, избегая просмотра. Но ошибка все еще есть. 

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 Ответ

1 голос
/ 27 мая 2020

Это происходит из-за того, что вы использовали KeyboardAvoidingView с одним из поведения в качестве заполнения. Поэтому всякий раз, когда вы нажимаете на TextInput, он добавляет нижний отступ к представлению, и представление перемещается вверх.

Если вы не хотите, чтобы это происходило, используйте тег View вместо KeyboardAvoidingView.

...