8

我使用本机反应来创建移动应用程序。我使用 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 个组件的最佳顺序是什么，以避免最佳键盘位置

4

3 回答 3

5

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

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

KeyboardAwareScrollView 示例

gif图像

用法

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
...
<SafeAreaView>
<KeyboardAwareScrollView>
  <View>
    <TextInput />
  </View>
</KeyboardAwareScrollView>
</SafeAreaView>
于 2019-09-26T14:41:23.727 回答
1

这是一个没有库的可重用组件示例，包括 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;
于 2020-11-22T08:14:56.210 回答
0

这是另一种解决方案，不需要外部库，例如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.

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

我建议阅读这篇出色的博客文章以获取更多信息。多亏了它，我创建了这个包装器。

于 2020-10-10T12:15:08.820 回答