Лучший заказ для KeyboardAvoidingView, SafeAreaView и ScrollView

Question

Я использую реагировать нативно для создания мобильного приложения.Я обрабатываю положение клавиатуры на своих экранах с помощью 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>

Мой вопрос: каков наилучший порядок использования этих трех компонентов, чтобы избежать наилучшего положения клавиатуры

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>