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

Question

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

\n

这是我针对此屏幕的代码：

\n

import React, { useState } from \'react\';\nimport { View, Text, KeyboardAvoidingView, Image, Dimensions, PixelRatio, StyleSheet } from \'react-native\';\nimport { widthPercentageToDP as wp, heightPercentageToDP as hp } from \'react-native-responsive-screen\';\n\nimport { COLORS } from \'../Constants/COLORS\';\nimport PrimaryButton from \'../Components/PrimaryButton\';\nimport PrimaryInput from \'../Components/PrimaryInput\';\nimport CheckBox from \'../Components/CheckBox\';\n\nconst Register = (props) => {\n  const [lisenceTerm, setLisenceTerm] = useState(true);\n  const [privacyPolicy, setPrivacyPolicy] = useState(true);\n\n  return (\n    <View style={styles.screen}>\n      <View style={styles.imageContainer}>\n        <Image style={styles.image} source={require(\'../assets/Img/office_5.jpg\')} />\n      </View>\n      <View style={styles.loginContainer}>\n        <View style={styles.headerContainer}>\n          <Text style={styles.headerText}>Join us</Text>\n        </View>\n          <KeyboardAvoidingView style={styles.inputContainer}>\n            <PrimaryInput placeholder=\'Name Surname\' />\n            <PrimaryInput placeholder=\'Your Email\' />\n            <PrimaryInput placeholder=\'Phone Number (05***)\' />\n            <PrimaryInput placeholder=\'Birth Date\' />\n          </KeyboardAvoidingView>\n        <View style={styles.checkBoxContainer}>\n          <CheckBox text=\'Kvkk s\xc3\xb6zle\xc5\x9fmesini okudum, kabul ediyorum\' active={lisenceTerm} onPress={() => setLisenceTerm(!lisenceTerm)} />\n          <CheckBox text=\'Kullan\xc4\xb1c\xc4\xb1 s\xc3\xb6zle\xc5\x9fmesini okudum, kabul ediyorum\' active={privacyPolicy} onPress={() => setPrivacyPolicy(!privacyPolicy)} />\n        </View>\n        <View style={styles.buttonsContainer}>\n          <PrimaryButton\n            buttonStyle={styles.button}\n            textStyle={styles.buttonText}\n            title=\'Register\' />\n        </View>\n      </View>\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  screen: {\n    flex: 1,\n  },\n  imageContainer: {\n    width: \'100%\',\n    height: \'34%\'\n  },\n  image: {\n    width: \'100%\',\n    height: \'100%\'\n  },\n  loginContainer: {\n    backgroundColor: \'white\',\n    width: \'100%\',\n    height: \'71%\',\n    position: \'absolute\',\n    zIndex: 1,\n    bottom: 0,\n    borderTopLeftRadius: 40,\n    borderTopRightRadius: 40,\n    alignItems: \'center\'\n  },\n  buttonsContainer: {\n    width: \'100%\',\n    justifyContent: \'center\',\n    alignItems: \'center\'\n  },\n  button: {\n    justifyContent: \'center\',\n    alignItems: \'center\',\n    width: \'75%\',\n    paddingVertical: \'3%\',\n    marginTop: hp(1.2),\n    borderRadius: hp(3.5),\n    backgroundColor: COLORS.royalBlue\n  },\n  buttonText: {\n    fontSize: hp(3.2),\n    fontFamily: \'BalooPaaji2ExtraBold\',\n    color: \'white\'\n  },\n  arrow: {\n    right: 20\n  },\n  inputContainer: {\n    width: \'100%\',\n    justifyContent: \'center\',\n    alignItems: \'center\',\n    marginBottom: hp(1),\n  },\n  headerContainer: {\n    marginTop: hp(3),\n    marginBottom: hp(2),\n    width: \'75%\',\n  },\n  headerText: {\n    fontSize: hp(3.5),\n    fontFamily: \'BalooPaaji2Bold\',\n    color: COLORS.royalBlue\n  },\n  checkBoxContainer: {\n    width: \'70%\',\n    justifyContent: \'flex-start\',\n    marginBottom: hp(1)\n  }\n})\n\nexport default Register;\n

\n

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

\n

\n

Answer 1

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

\n

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

\n

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

\n

import { KeyboardAvoidingView, ScrollView } from \'react-native\';\n\nconst Register = (props) => {\n  const [lisenceTerm, setLisenceTerm] = useState(true);\n  const [privacyPolicy, setPrivacyPolicy] = useState(true);\n\n  return (\n    <KeyboardAvoidingView\n        style={{ flex: 1 }}\n        behavior={(Platform.OS === \'ios\') ? \'padding\' : null}\n        enabled\n        keyboardVerticalOffset={Platform.select({ ios: 80, android: 500 })}>\n    <ScrollView>\n    <View style={styles.screen}>\n      <View style={styles.imageContainer}>\n        <Image style={styles.image} source={require(\'../assets/Img/office_5.jpg\')} />\n      </View>\n      <View style={styles.loginContainer}>\n        <View style={styles.headerContainer}>\n          <Text style={styles.headerText}>Join us</Text>\n        </View>\n          <View style={styles.inputContainer}>\n            <PrimaryInput placeholder=\'Name Surname\' />\n            <PrimaryInput placeholder=\'Your Email\' />\n            <PrimaryInput placeholder=\'Phone Number (05***)\' />\n            <PrimaryInput placeholder=\'Birth Date\' />\n          </View>\n        <View style={styles.checkBoxContainer}>\n          <CheckBox text=\'Kvkk s\xc3\xb6zle\xc5\x9fmesini okudum, kabul ediyorum\' active={lisenceTerm} onPress={() => setLisenceTerm(!lisenceTerm)} />\n          <CheckBox text=\'Kullan\xc4\xb1c\xc4\xb1 s\xc3\xb6zle\xc5\x9fmesini okudum, kabul ediyorum\' active={privacyPolicy} onPress={() => setPrivacyPolicy(!privacyPolicy)} />\n        </View>\n        <View style={styles.buttonsContainer}>\n          <PrimaryButton\n            buttonStyle={styles.button}\n            textStyle={styles.buttonText}\n            title=\'Register\' />\n        </View>\n      </View>\n    </View>\n    </ScrollView>\n    </KeyboardAvoidingView>\n  )\n}\n

\n