Невозможно включить автозамену в {false} в реагирующем родном TextInput

Ответ 1

TL; DR: вы должны закрыть и перезапустить клавиатуру после autoCorrect переключения autoCorrect TextInput.

Дружище, это не твоя вина, у меня возникла та же проблема с autoFocus react native компонента TextInput. Я устанавливаю имя state для editable реквизита TextInput а затем pencil кнопку pencil меняю editable реквизиты. Дизайнер сказал мне после того, как TextInput редактируемого курсор должен быть сфокусирован, поэтому я использую isEditable состояние для autoFocus опоры, см ниже:

state = {
  isEditable: false
};

handleEdit = () => {
  const { isEditable } = this.state;
  this.setState({ isEditable: !isEditable });
};

<TextInput
  autoFocus={isEditable}
  editable={isEditable}
  style={styles.textNameEditable}
  defaultValue={text}
  numberOfLines={1}
/>

Затем я нажимаю кнопку редактирования и получается:

Но это не сфокусировано, и клавиатура не запускалась, я искал и нашел эту ссылку, TextInput не изменяет/обновляет некоторые свои реквизиты после componentDidMount. ☹️. Кроме того, это не отличается в iOS или Android, у них обоих есть эта проблема, я использовал ref чтобы сосредоточиться на этом TextInput после того, isEditable состояние isEditable стало true. см. следующий код:

<TextInput
  editable={isEditable}
  style={styles.textNameEditable}
  defaultValue={text}
  numberOfLines={1}
  ref={input => {
    this.input = input;
  }}
/>

componentDidUpdate() {
  const { isEditable } = this.state;
  if (isEditable) {
    this.input.focus();
  }
}

И твой случай:

Абсолютно нельзя использовать ref потому что autoCorrect должна отображаться с react native и это не похоже на focus() и blur() поэтому JavaScript не может получить к нему доступ.

Я делаю тестовую форму для вашего случая, я создаю еще одну кнопку, например звездочку, для переключения значения autoCorrect рядом с кнопкой редактирования. закрашенная звезда означает, что autoCorrect - это true а autoCorrect звезда означает, что autoCorrect - это false, теперь смотрите код тестовой области и вид:

state = {
  isEditable: false,
  correct: true
};

handleCorrect = () => {
  const { correct } = this.state;
  this.setState({ correct: !correct });
};

<TextInput
  autoCorrect={correct}
  editable={isEditable}
  style={styles.textNameEditable}
  defaultValue={text}
  numberOfLines={1}
  ref={input => {
    this.input = input;
  }}
/>

На фотографии выше видно, что autoCorrect отображается как true, поэтому она включена:

Когда я пишу неправильное персидское слово, автокоррекция показывает свое предложение, теперь пора нажать звездочку:

Вау, autoCorrection false в описанной выше ситуации, но все же мы видим автокоррекцию мобильного телефона. это так же, как autoFocus он визуализируется при первом рендеринге, и после него TextInput не может изменять/обновлять свои реквизиты. вдруг я нажимаю кнопку редактирования:

И я снова autoCorrect кнопку редактирования, так что, конечно, вы поняли, что autoCorrect теперь false, хорошо, теперь посмотрим, что я видел:

autoCorrect осталась false при двойном нажатии кнопки редактирования, и теперь автокоррекция устройства полностью исчезает. Я не знаю, является ли это ошибкой или моим плохим пониманием, но я понял, что в этой области тестирования для обновления значения autoCorrect мы должны что-то сделать после изменения его значения, чтобы закрыть клавиатуру iPhone, а затем перезапустить ее. Главное, что выпустил TextInput - это запущенная клавиатура.

Для моего теста, когда я нажал кнопку editable подпорка TextInput изменяется на false, а клавиатура закрывается, поэтому, когда я снова нажал кнопку редактирования, TextInput сфокусировался и клавиатура перезапустилась с новым значением autoCorrect. Это секрет.

Решение:

Вы должны сделать что-то, чтобы закрыть и снова открыть клавиатуру iOS с новым значением autoCorrect. для тестового примера, который я написал для вашего вопроса, я решил создать гибридное инновационное решение, используя ref и обратный вызов setState:

handleCorrect = () => {
  const { correct } = this.state;
  this.input.blur(); //-- this line close the keyboard
  this.setState({ correct: !correct },
    () => {
      setTimeout(() => this.input.focus(), 50);
      //-- above line re-launch keyboard after 50 milliseconds
      //-- this 50 milliseconds is for waiting to closing keyborad finish
    }
  );
};


<TextInput
  autoCorrect={correct}
  editable={isEditable}
  style={styles.textNameEditable}
  defaultValue={text}
  numberOfLines={1}
  ref={input => {
    this.input = input;
  }}
/>

А после нажатия звездочки клавиатура закрывается и перезапускается, а автокоррекция полностью исчезает.

Примечание: очевидно, я суммировал некоторые другие коды, такие как деструктурирование и написание классов или расширений и т.д. Для лучшей читаемости человеком

Ответ 2

Проблема не в вашем коде полностью (за исключением части Regex, которая не работала на моем устройстве), а в том, как реагирует нативная визуализация клавиатуры.
Я создал образец, который наряду с вашим исходным кодом также меняет цвет фона экрана.
Вы обнаружите, что цвет меняется мгновенно, когда вводится "@", а клавиатура - нет.
Если вы не перезагрузите клавиатуру. Для этого, если вы откомментируете код, он отклоняет клавиатуру один раз, и после того, как вы снова нажмете на текст, введите новую клавиатуру без автозамены и автокапитализации.

    state = {
    searchQuery: null,
    isFocused: true,
  }
  constructor(props) {
    super(props);
    this.onChangeText = this.onChangeText.bind(this);
}

onChangeText = (val) => {
  const suggestTrigger = val.match(/@[A-Za-z0-9]*$/i) //grab "@" trigger
  const searchQuery = (suggestTrigger && suggestTrigger.length > 0) ? suggestTrigger[0] : null;
  // Un comment this to reload
  // if(searchQuery && this.state.isFocused) {
  //   this.setState({
  //     isFocused: false
  // });
  // Keyboard.dismiss();
  //   // this.myTextInput.focus()
  // }
  this.setState({
      searchQuery: searchQuery
  })
}
  render() {
    const { searchQuery } = this.state
    return (
      <View style={[styles.container,
        {
        backgroundColor: searchQuery ? "red": "green"}
      ]}>
        <TextInput 
        style={{width: 300, height: 50, borderWidth: 1}}
        ref={(ref)=>{this.myTextInput = ref}}
          autoCapitalize={searchQuery ? "none" : "sentences"}
          autoCorrect={searchQuery ? false : true}
          onChangeText={this.onChangeText}
        />
      </View>
    );
  }

Поскольку теперь мы знаем, что основной причиной ошибки может быть, может быть найдено лучшее решение.

Ответ 3

У меня есть 2 предложения: во-первых, вы пытались использовать запасной автозамены?

spellCheck={this.state.searchQuery ? false : true}

Во-вторых, пробовали ли вы использовать нативный код (Obj-C/Swift)?

import { Platform, TextInput, View } from 'react-native';
import { iOSAutoCorrect } from './your-native-code';

const shouldWork = Platform.OS === 'ios' ? <iOSAutoCorrect /> : <TextInput 
autoCapitalize={this.state.searchQuery ? "none" : "sentences"}
autoCorrect={this.state.searchQuery ? false : true}
onChangeText={this.onChangeText} />

return (<View>{shouldWork}</View>);

В iOSAutoCorrect вы должны использовать UITextView. Затем установите правильное значение в зависимости от вашего состояния:

textField.autocorrectionType = UITextAutocorrectionTypeNo; // or UITextAutocorrectionTypeYes

Я свободно закодировал, таким образом, код не проверен и может содержать ошибки. Удачи.