React Native Siri Dictionation被重写器缩短-功能组件

Question

我有一个react原生project。

我有一个输入，我在应用程序的几个地方使用。我可以输入，没有问题，但我使用ios键盘上的siri听写，单词被重写器缩短了。

以前也提出过类似的问题，React原生听写在iOS上突然切词但唯一的答案是类组件。有没有办法用功能组件来解决这个问题？

我试着在textChangeHandler周围抛出一个useMemo((，通过阻止所有状态更新，这确实允许siri工作。但这不好，因为我没有数据。

这是我的组件：

import React, { useReducer, useEffect, useRef } from 'react';
import {
  StyleSheet,
  View,
  Text,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import mergeRefs from 'react-merge-refs';
import PropTypes from 'prop-types';
const INPUT_CHANGE = 'INPUT_CHANGE';
const INPUT_BLUR = 'INPUT_BLUR';
const formatDate = date => {
  const options = {
    month: 'numeric',
    day: 'numeric',
    year: '2-digit',
  };
  const formattedDate = new Date(date);
  const _formattedDate = formattedDate.toLocaleDateString('en-US', options);
  return _formattedDate;
};
const inputReducer = (state, action) => {
  switch (action.type) {
    case INPUT_CHANGE:
      return {
        ...state,
        value: action.value,
        isValid: action.isValid,
      };
    case INPUT_BLUR:
      return {
        ...state,
        touched: true,
      };
    default:
      return state;
  }
};
const Input = React.forwardRef((props, ref) => {
  const [inputState, dispatch] = useReducer(inputReducer, {
    value: props.initialValue ? props.initialValue : '',
    isValid: props.initiallyValid ? props.initiallyValid : true,
    touched: props.initialValue ? true : false,
  });
  const { onInputChange, id } = props;
  useEffect(() => {
    onInputChange(id, inputState.value, inputState.isValid);
  }, [inputState, onInputChange, id]);
  const textChangeHandler = text => {
    const emailRegex =
      /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
    let isValid = true;
    if (props.required && text.trim().length === 0) {
      isValid = false;
    }
    if (props.email && !emailRegex.test(text.toLowerCase())) {
      isValid = false;
    }
    if (props.min != null && +text < props.min) {
      isValid = false;
    }
    if (props.max != null && +text > props.max) {
      isValid = false;
    }
    if (props.minLength != null && text.length < props.minLength) {
      isValid = false;
    }
    dispatch({ type: INPUT_CHANGE, value: text, isValid: isValid });
  };
  const lostFocusHandler = () => {
    dispatch({ type: INPUT_BLUR });
  };
  const inputRef = useRef();
  const getFormValue = () => {
    const inputValue = props.initialValue
      ? props.initialValue
      : inputState.value;
    if (props.date) {
      return formatDate(inputValue).toString();
    }
    return inputValue;
  };
  return (
    <View style={{ ...props.style, ...styles.container }}>
      <TextInput
        ref={mergeRefs([inputRef, ref])}
        {...props}
        value={getFormValue()}
        onChangeText={textChangeHandler}
        onBlur={lostFocusHandler}
      />
      {!inputState.isValid && inputState.touched && (
        <TouchableOpacity onPress={() => inputRef.current.focus()}>
          <View style={{ ...props.style, ...styles.errorContainer }}>
            <Text
              testID="Auth.errorMessage"
              style={{ color: props.errorTextColor, ...styles.errorText }}
            >
              {props.errorText}
            </Text>
          </View>
        </TouchableOpacity>
      )}
    </View>
  );
});
const styles = StyleSheet.create({
  container: { flex: 1 },
  errorContainer: {
    marginVertical: 5,
  },
  errorText: {
    fontSize: 13,
  },
});
Input.displayName = 'Input'; //This is here only to make esLint happy
Input.propTypes = {
  date: PropTypes.bool,
  onInputChange: PropTypes.func,
  id: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  initialValue: PropTypes.any,
  initiallyValid: PropTypes.bool,
  required: PropTypes.bool,
  email: PropTypes.bool,
  min: PropTypes.number,
  max: PropTypes.number,
  minLength: PropTypes.number,
  style: PropTypes.object,
  errorText: PropTypes.string,
  errorTextColor: PropTypes.string,
};
export default Input;

Answer 1

好吧，我想在找到解决方案之前我忘了回答这个问题。这有点麻烦，但我只是在5毫秒的超时时间内打包了getFormValue的内容，这足以防止它出错。

  const getFormValue = () => {
    setTimeout(() => {
      const inputValue = props.initialValue
        ? props.initialValue
        : inputState.value;
      if (props.date) {
        return formatDate(inputValue).toString();
      }
      return inputValue;
    }, 5);
  };