KeyboardAvoidingView、SafeAreaView 和 ScrollView 的最佳顺序答案

【问题标题】：Best order for KeyboardAvoidingView, SafeAreaView and ScrollViewKeyboardAvoidingView、SafeAreaView 和 ScrollView 的最佳顺序
【发布时间】：2020-01-26 20:52:20
【问题描述】：

我使用 react native 来创建一个移动应用。我使用 KeyboardAvoidingView、SafeAreaView 和 ScrollView 来处理屏幕中的键盘位置。我使用这个命令来管理键盘位置：

<KeyboardAvoidingView style={{ flex: 1 }} behavior="padding" enabled>
        <SafeAreaView>
          <ScrollView>
            <Header
              leftComponent={{
                icon: "cancel",
                color: "#fff",
                size: 30,
                onPress: () => navigate("Dashboard")
              }}
              centerComponent={{ text: "Ajouter une demande", style: { color: "#fff", fontSize: 18 } }}
              rightComponent={{
                icon: "help",
                color: "#fff",
                size: 30,
                fontWeight: "bold",
                onPress: () => Alert.alert("En cours de développement")
              }}
              backgroundColor="rgba(82, 159, 197, 1)"
              // outerContainerStyles={{ height: Platform.OS === "ios" ? 70 : 70 - 24 }}
              containerStyle={
                {
                  // marginTop: Platform.OS === "ios" ? 0 : 15
                }
              }
            />
            <View>
              <Input placeholder="INPUT WITH CUSTOM ICON" leftIcon={<Icon name="user" size={24} color="black" />} />
            </View>
          </ScrollView>
        </SafeAreaView>
      </KeyboardAvoidingView>

我的问题是：使用这 3 个组件的最佳顺序是什么以避免最佳键盘位置

【问题讨论】：

标签： react-native scroll keyboard safeareaview

【解决方案1】：

SafeAreaView 仅适用于iOS。因此，假设您使用iOS。如果你的项目是iOS，可以使用KeyboardAwareScrollView。

SafeAreaView 应该在顶部，因为它覆盖了屏幕区域。

KeyboardAwareScrollView 示例

用法

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
...
<SafeAreaView>
<KeyboardAwareScrollView>
  <View>
    <TextInput />
  </View>
</KeyboardAwareScrollView>
</SafeAreaView>

【讨论】：

你好，你推荐使用这个库而不是原生的 KeyboardAvoidingView 组件？
是的，@KhaledIf 如果您创建 iOS 项目，您可以更舒适地工作。

【解决方案2】：

这是另一种解决方案，不需要外部库，例如 react-native-keyboard-aware-scroll-view。

我制作了一个ScreenWrapper 组件来处理 IO 问题：

import React, { ReactElement } from 'react';
import {
  KeyboardAvoidingView, Platform,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

const ScreenWrapper = ({ children }: Props): ReactElement => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      {
        Platform.OS === 'ios'
          ? (
            <KeyboardAvoidingView style={{ flex: 1 }} behavior="padding">
              {children}
            </KeyboardAvoidingView>
          )
          : (
            <>
              {children}
            </>
          )
      }
    </SafeAreaView>
  );
};

export default ScreenWrapper;

由于 Android 看起来在没有 KeyboardAvoidingView 的情况下可以使事情变得更好，所以我决定只将它用于 IO，它更易于管理。

我使用 padding 是因为它符合我的需要，但您可能想要更改它。

我建议阅读this excellent blog post 了解更多信息。感谢它，我创建了这个包装器。

【讨论】：

在您的示例中，我在 children 内映射了一个包含 20 个 TextInputs 的数组，但它不起作用。滚动不会低于我点击的实际输入。

【解决方案3】：

这是一个没有库的可重用组件示例，包括 KeyboardAvoidingView、SafeAreaView 和 ScrollView。它还使滚动视图扩展到全高。

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

const ScreenContainer = props => {
  const { children } = props;
  return (
    <SafeAreaView style={ { flex: 1 } }>
      <KeyboardAvoidingView
        behavior={ Platform.OS === 'ios' ? 'padding' : 'height' }
        style={ { flex: 1 } }
      >
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          keyboardShouldPersistTaps="handled"
        >
          { children }
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};

export default ScreenContainer;

【讨论】：

我在您的示例中映射了一个包含 20 个 TextInputs 的数组，但它不起作用。滚动不会低于我点击的实际输入。