在选择屏幕底部的某些 TextInput 框时，KeyboardAvoidingView 不会将视图移动得足够高

Question

这是针对使用react-native 创建的iOS 应用程序。我正在使用KeyboardAvoidingView包含一些字段的表单TextInput。TextInput我观察到，当选择屏幕底部的字段时，视图移动的高度不足以容纳键盘。

我创建了一种小吃来演示这种行为（下面的链接）。我还观察到，在某些情况下，一台 iPhone 上的视图移动得足够高，但另一台 iPhone 上却没有。最初，该问题是针对 iPhone 6S Plus 报告的，用户报告说视图没有移动到足够高以容纳键盘，在这种情况下，他们无法看到他们在输入框中键入的内容。当我尝试制作一个零食来重现该问题时，我发现即使在 iPhone 5s 上也能重现该问题。

https://snack.expo.io/ry15dng2-

在上面的小吃中，如果单击带有TextInputvalue 的框jug，您应该看到键盘与输入框重叠并且不清晰可见。我对零食的质量感到抱歉。我只是尝试创建一个最小的示例来重现该问题。

我该如何解决这个问题？

Answer 1

我也遇到过这个问题（在Android上）。他们的关键是这个道具KeyboardAvoidingView：

/**
 * This is the distance between the top of the user screen and the react native view,
 * may be non-zero in some use cases. The default value is 0.
 */
keyboardVerticalOffset: PropTypes.number.isRequired,

该视图不会自动识别应用程序框架顶部与KeyboardAvoidingView您正在渲染的应用程序框架顶部之间的偏移量，因此如果该数字非零，它不会自行移动足够的距离。

要解决此问题，请添加一个明确的keyboardVerticalOffset（如果已知），如下所示...

<KeyboardAvoidingView behavior={"position"} keyboardVerticalOffset={Constants.statusBarHeight}>

...或者将 移动KeyboardAvoidingView到组件树的根部，以便其上方没有偏移。