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>