react-native - KeyboardAvoidingView 在我的应用程序上无法正常工作

Question

我对这个问题进行了很多搜索，但我现在不知道该怎么做，所以我决定在这里提问，任何帮助将不胜感激。在我的注册屏幕中，我有一些input用户必须填写，最后一个我需要避免键盘覆盖。所以我使用KeyboardAvoidingView组件来解决这个问题，但正如您在屏幕截图中看到的那样，设备键盘仍然覆盖我的input（出生日期）。

这是我在这个屏幕上的代码：

import React, { useState } from 'react';
import { View, Text, KeyboardAvoidingView, Image, Dimensions, PixelRatio, StyleSheet } from 'react-native';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';

import { COLORS } from '../Constants/COLORS';
import PrimaryButton from '../Components/PrimaryButton';
import PrimaryInput from '../Components/PrimaryInput';
import CheckBox from '../Components/CheckBox';

const Register = (props) => {
  const [lisenceTerm, setLisenceTerm] = useState(true);
  const [privacyPolicy, setPrivacyPolicy] = useState(true);

  return (
    <View style={styles.screen}>
      <View style={styles.imageContainer}>
        <Image style={styles.image} source={require('../assets/Img/office_5.jpg')} />
      </View>
      <View style={styles.loginContainer}>
        <View style={styles.headerContainer}>
          <Text style={styles.headerText}>Join us</Text>
        </View>
          <KeyboardAvoidingView style={styles.inputContainer}>
            <PrimaryInput placeholder='Name Surname' />
            <PrimaryInput placeholder='Your Email' />
            <PrimaryInput placeholder='Phone Number (05***)' />
            <PrimaryInput placeholder='Birth Date' />
          </KeyboardAvoidingView>
        <View style={styles.checkBoxContainer}>
          <CheckBox text='Kvkk sözleşmesini okudum, kabul ediyorum' active={lisenceTerm} onPress={() => setLisenceTerm(!lisenceTerm)} />
          <CheckBox text='Kullanıcı sözleşmesini okudum, kabul ediyorum' active={privacyPolicy} onPress={() => setPrivacyPolicy(!privacyPolicy)} />
        </View>
        <View style={styles.buttonsContainer}>
          <PrimaryButton
            buttonStyle={styles.button}
            textStyle={styles.buttonText}
            title='Register' />
        </View>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
  },
  imageContainer: {
    width: '100%',
    height: '34%'
  },
  image: {
    width: '100%',
    height: '100%'
  },
  loginContainer: {
    backgroundColor: 'white',
    width: '100%',
    height: '71%',
    position: 'absolute',
    zIndex: 1,
    bottom: 0,
    borderTopLeftRadius: 40,
    borderTopRightRadius: 40,
    alignItems: 'center'
  },
  buttonsContainer: {
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center'
  },
  button: {
    justifyContent: 'center',
    alignItems: 'center',
    width: '75%',
    paddingVertical: '3%',
    marginTop: hp(1.2),
    borderRadius: hp(3.5),
    backgroundColor: COLORS.royalBlue
  },
  buttonText: {
    fontSize: hp(3.2),
    fontFamily: 'BalooPaaji2ExtraBold',
    color: 'white'
  },
  arrow: {
    right: 20
  },
  inputContainer: {
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: hp(1),
  },
  headerContainer: {
    marginTop: hp(3),
    marginBottom: hp(2),
    width: '75%',
  },
  headerText: {
    fontSize: hp(3.5),
    fontFamily: 'BalooPaaji2Bold',
    color: COLORS.royalBlue
  },
  checkBoxContainer: {
    width: '70%',
    justifyContent: 'flex-start',
    marginBottom: hp(1)
  }
})

export default Register;

下面是结果。顺便说一句，我使用behavior和keyboardVerticalOffsetprops 来控制该组件的行为方式，但仍然存在同样的问题。

标签： react-native

Answer 1

您的KeyboardAvoidingView组件必须位于渲染树的顶部

为了滚动到您的加入我们视图，您必须在您的组件中设置一个 ScrollView，KeyboardAvoidingView并且这些组件必须位于渲染器之上。

试试这个（基于我的 iOS / android 设置）：

import { KeyboardAvoidingView, ScrollView } from 'react-native';

const Register = (props) => {
  const [lisenceTerm, setLisenceTerm] = useState(true);
  const [privacyPolicy, setPrivacyPolicy] = useState(true);

  return (
    <KeyboardAvoidingView
        style={{ flex: 1 }}
        behavior={(Platform.OS === 'ios') ? 'padding' : null}
        enabled
        keyboardVerticalOffset={Platform.select({ ios: 80, android: 500 })}>
    <ScrollView>
    <View style={styles.screen}>
      <View style={styles.imageContainer}>
        <Image style={styles.image} source={require('../assets/Img/office_5.jpg')} />
      </View>
      <View style={styles.loginContainer}>
        <View style={styles.headerContainer}>
          <Text style={styles.headerText}>Join us</Text>
        </View>
          <View style={styles.inputContainer}>
            <PrimaryInput placeholder='Name Surname' />
            <PrimaryInput placeholder='Your Email' />
            <PrimaryInput placeholder='Phone Number (05***)' />
            <PrimaryInput placeholder='Birth Date' />
          </View>
        <View style={styles.checkBoxContainer}>
          <CheckBox text='Kvkk sözleşmesini okudum, kabul ediyorum' active={lisenceTerm} onPress={() => setLisenceTerm(!lisenceTerm)} />
          <CheckBox text='Kullanıcı sözleşmesini okudum, kabul ediyorum' active={privacyPolicy} onPress={() => setPrivacyPolicy(!privacyPolicy)} />
        </View>
        <View style={styles.buttonsContainer}>
          <PrimaryButton
            buttonStyle={styles.button}
            textStyle={styles.buttonText}
            title='Register' />
        </View>
      </View>
    </View>
    </ScrollView>
    </KeyboardAvoidingView>
  )
}