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组件来处理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了解更多信息。我创建了这个包装器。

Answer 3

这是一个不带库的可重用组件示例，其中包括KeyboardAvoidingView，SafeAreaView和ScrollView。它还使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的最佳顺序

3 个答案: