当我运行 React Native Expo 应用程序时，键盘覆盖 TextInput 表单答案

【问题标题】：The Keyboard cover TextInput form when I run the React Native Expo app当我运行 React Native Expo 应用程序时，键盘覆盖 TextInput 表单
【发布时间】：2020-05-28 05:31:39
【问题描述】：

当我使用 expo 运行应用程序并使用我的 DateFormInput 组件时，键盘覆盖了 TextInput。我尝试使用 I 、“@pietile-native-kit/keyboard-aware-scrollview”、“@types/react-native-keyboard-spacer”、“react-native-keyboard-aware-scroll-view”和“react -native-keyboard-spacer”，但它们都不能在 IOS 或 Android 上运行。

这是我渲染 TextInput (DateFormInput) 的组件：

import React from 'react';
import {
  Text,
  StyleSheet,
  View,
  KeyboardAvoidingView,
  ScrollView,
} from 'react-native';

import Box from './Box';
import Button from './Button';
import DateFormInput from './DateFormInput';
import { isValidDate } from '../util';
import strings from '../strings';

interface Props {
  handleSubmit: (formName: string) => void;
  handleOnChange: (formName: string, input: string) => void;
  handleCancelButton: (formName: string) => void;
  toggleInputError: (formName: string, clear?: boolean) => void;
  inputFormText: string;
  inputError: boolean;
  formName: string;
}

export const DDCAndDTNInputForm: React.FC<Props> = (props: Props) => {
  return (
    <Box style={styles.box}>
      <Text>
        {props.formName === 'DrugTest' ? strings.DrugTestDate : strings.DDCDate}
      </Text>
      <View style={{ flex: 1 }}>
        <KeyboardAvoidingView behavior="padding" style={styles.box}>
          <ScrollView style={{ flex: 1 }}>
            <DateFormInput
              type={'datetime'}
              options={{ format: 'MM/DD/YYYY' }}
              placeholder={'MM/DD/YYYY'}
              value={props.inputFormText}
              error={props.inputError}
              onChangeText={text => props.handleOnChange(props.formName, text)}
              onBlur={e => {
                isValidDate(props.inputFormText)
                  ? props.handleSubmit(props.formName)
                  : props.toggleInputError(props.formName, true);
              }}
            />
          </ScrollView>
        </KeyboardAvoidingView>
      </View>

      <Text style={{ color: 'red' }}>
        {props.inputError ? 'Type a valid date' : null}
      </Text>

      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'space-around',
        }}
      >
        <Button
          viewStyle={styles.linkButton}
          title={'CANCEL'}
          onPress={() => {
            props.handleCancelButton(props.formName);
          }}
        />

        <Button
          viewStyle={styles.linkButton}
          title={'SAVE DATE'}
          onPress={() => {
            isValidDate(props.inputFormText)
              ? props.handleSubmit(props.formName)
              : props.toggleInputError(props.formName, true);
          }}
        />
      </View>
    </Box>
  );
};

export default DDCAndDTNInputForm;

const styles = StyleSheet.create({
  linkButton: {
    paddingVertical: 8,
    paddingHorizontal: 16,
    marginVertical: 8,
    flex: 1,
  },
  box: {
    padding: 24,
    marginBottom: 16,
    flex: 1,
  },
});

这是我的自定义 InputText (DateFormInput)：

import React from 'react';
import {
  Text,
  StyleProp,
  TextStyle,
  StyleSheet,
  KeyboardType,
  View,
  NativeSyntheticEvent,
  TextInputFocusEventData,
} from 'react-native';
import { TextInputMask } from 'react-native-masked-text';

import { textStyle, colors } from '../styles';

const styles = StyleSheet.create({
  input: {
    marginVertical: 8,
    padding: 16,
    borderWidth: 2,
    borderColor: colors.sectionBackground,
    borderRadius: 8,
    backgroundColor: colors.white,
  },
});

export default (props: {
  label: string;
  value: string;
  labelStyle: StyleProp<TextStyle>;
  keyboardType?: KeyboardType;
  onChangeText: (text: string) => void;
  onBlur?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
  error?: boolean;
  defaultValue?: string;
}) => (
  <View style={{ flexDirection: 'column', alignContent: 'stretch' }}>
    <Text style={[textStyle.formLabel, props.labelStyle]}>{props.label}</Text>
    <TextInputMask
      type={'datetime'}
      options={{ format: 'MM/DD/YYYY' }}
      placeholder={'MM/DD/YYYY'}
      style={[styles.input, props.error ? { borderColor: colors.red } : null]}
      value={props.value}
      onChangeText={props.onChangeText}
      onBlur={props.onBlur}
    />
  </View>
);

【问题讨论】：

您能否将监听器附加到 onFocus 事件并使用它来滚动输入字段或其标签到视口顶部？

标签： reactjs typescript react-native expo

【解决方案1】：

对于在 sdk 42 上仍然面临同样问题的任何人，我发现由于某些未知原因，键盘覆盖了我的 TextInput，因为它们被包裹在 View 中。因此，将我的 TextInput 包裹在 ScrollView 中，可以让键盘在滚动时向上推动输入。

【讨论】：

【解决方案2】：

您有两种选择来解决您的问题。

1) 最简单的方法是，在您的 expo 配置中添加属性 androidStatusBar，例如：https://stackoverflow.com/a/44876951/7714108

2) 您可以使用 KeyboardAvoidingView 但在您的 UI 视图之上。那么这个组件必须是父亲，因为当我小时候使用时，就像你在你的组件中使用 DDCAndDTNInputForm 一样，它不起作用。我仍在努力尝试理解为什么会出现这种行为。例如在您的组件中尝试像这样使用：

<KeyboardAvoidingView style={{flex: 1} behavior="padding" enabled>
 ... your UI ...
</KeyboardAvoidingView>

这是参考：https://docs.expo.io/versions/v35.0.0/react-native/keyboardavoidingview/

【讨论】：