KeyboardAvoidingView、SafeAreaView 和 ScrollView 的最佳顺序

Question

我使用 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 个组件的最佳顺序是什么以避免最佳键盘位置

Answer 1

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

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

KeyboardAwareScrollView 示例

用法

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

Answer 2

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

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

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 的情况下做得很好，我决定只将它用于 IOs，它更易于管理。

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

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

Answer 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;

KeyboardAvoidingView、SafeAreaView 和 ScrollView 的最佳顺序

Best order for KeyboardAvoidingView, SafeAreaView and ScrollView

keyboard

scroll

react-native

safeareaview