Я определил два поля TextInput следующим образом:
<TextInput
style = {styles.titleInput}
returnKeyType = {"next"}
autoFocus = {true}
placeholder = "Title" />
<TextInput
style = {styles.descriptionInput}
multiline = {true}
maxLength = {200}
placeholder = "Description" />
Но после нажатия кнопки «Далее» на моей клавиатуре мое приложение, реагирующее на натив, не перепрыгивает во второе поле TextInput. Как я могу этого достичь?
Спасибо!
ios
react-native
andreaswienes
источник
источник
v16.8.0
или выше я бы порекомендовал ответ, предоставленный @Eli Johnson, в нижней части. React устарел во многих случаях использованияref
в решениях ниже.Ответы:
Установите второй
TextInput
фокус, когда предыдущийTextInput
«sonSubmitEditing
срабатывает.Попробуй это
Добавление ссылки на второй TextInput
ref={(input) => { this.secondTextInput = input; }}
Привязать функцию фокуса к первому событию TextSput onSubmitEditing.
onSubmitEditing={() => { this.secondTextInput.focus(); }}
Не забудьте установить для blurOnSubmit значение false, чтобы предотвратить мерцание клавиатуры.
blurOnSubmit={false}
источник
onSubmitEditing
обратный вызов вызывается послеblur
события. Таким образом, клавиатура может сойти с ума, если сразу сфокусироваться на следующем элементе. Поэтому может быть полезно установитьblurOnSubmit={false}
все элементы в форме, но оставитьtrue
на последнем элементе, чтобы кнопка « Готово» размыла последний ввод.blurOnSubmit={false}
для предотвращения мерцания клавиатуры привело к тому, что это перестало работать, любой, кто знает, что происходит?focus
работу, убедитесь, что вы не используете оболочку дляTextInput
компонента. Если у вас естьCustomTextInput
компонент say, который переноситсяTextInput
, вам нужно реализоватьTextInput
методы размытия и фокусировки для этого компонента, чтобы он работал как положено.Вы можете сделать это без использования ссылок . Этот подход предпочтителен, поскольку ссылки могут привести к хрупкому коду . Документы React рекомендуют находить другие решения, где это возможно:
Вместо этого мы будем использовать переменную состояния, чтобы сфокусировать второе поле ввода.
Добавьте переменную состояния, которую мы передадим в качестве опоры
DescriptionInput
:Определите метод-обработчик, который установит для этой переменной состояния значение true:
После отправки / нажатия Enter / Next на
TitleInput
мы позвонимhandleTitleInputSubmit
. Это установитfocusDescriptionInput
в истину.DescriptionInput
'sfocus
prop установлен в нашуfocusDescriptionInput
переменную состояния. Таким образом, когдаfocusDescriptionInput
изменения (в шаге 3),DescriptionInput
будет повторно визуализировать сfocus={true}
.Это хороший способ избежать использования ссылок, так как ссылки могут привести к более хрупкому коду :)
РЕДАКТИРОВАТЬ: h / t в @LaneRettig, чтобы указать, что вам нужно обернуть React Native TextInput некоторыми добавленными реквизитами и методами, чтобы он реагировал на
focus
:источник
Начиная с React Native 0.36, вызов
focus()
(как предложено в нескольких других ответах) на узле ввода текста больше не поддерживается. Вместо этого вы можете использоватьTextInputState
модуль из React Native. Я создал следующий вспомогательный модуль, чтобы сделать это проще:Затем вы можете вызвать
focusTextInput
функцию для любого «ref» из aTextInput
. Например:источник
<Field ... onSubmitEditing={() => focusTextInput(this._password)} />
и ссылка должна быть такой<Field ... withRef refName={e => this._password = e}/>
calling focus() on a text input node isn't supported any more
=> смелое утверждение, источник? Вызовfocus()
работает нормально с v0.49.5 +,TextInputState
пока не документированfocus()
иblur()
упоминается: facebook.github.io/react-native/releases/next/docs/…Я создал небольшую библиотеку, которая делает это, не нужно никаких изменений кода, кроме замены представления обтекания и импорта TextInput:
https://github.com/zackify/react-native-autofocus
Подробно объяснено здесь: https://zach.codes/autofocus-inputs-in-react-native/
источник
Думал, что поделюсь своим решением, используя функциональный компонент ... « это » не нужно!
Вот пример моего компонента:
Я не знаю, надеюсь, это поможет кому-то =)
источник
При использованииact-native 0.45.1 я также столкнулся с проблемами при попытке установить фокус на пароле TextInput после нажатия клавиши возврата на имени пользователя TextInput.
Попробовав большинство решений с самым высоким рейтингом здесь, на SO, я нашел решение на github, которое удовлетворяло мои потребности: https://github.com/shoutem/ui/issues/44#issuecomment-290724642
Подвести итог:
И тогда я использую это так:
источник
ref
вinputRef
... Вы можете удалить весь пользовательский компонент, и ваш второй блок кода будет работать как есть, если вы вернетесь к использованиюref
Для меня на RN 0.50.3 это возможно следующим образом:
Вы должны увидеть это.PasswordInputRef. _root .focus ()
источник
Если вы используете
tcomb-form-native
как я, вы можете сделать это тоже. Вот хитрость: вместо того, чтобы устанавливать реквизитыTextInput
напрямую, вы делаете это черезoptions
. Вы можете ссылаться на поля формы как:Итак, конечный продукт выглядит примерно так:
(Благодарим Remcoanker за публикацию идеи здесь: https://github.com/gcanti/tcomb-form-native/issues/96 )
источник
Это способ, которым я достиг этого. И в приведенном ниже примере используется API React.createRef (), представленный в React 16.3.
Я думаю, что это поможет вам.
источник
Мой сценарий <CustomBoladonesTextInput />, заключающий в себе RN <TextInput /> .
Я решил эту проблему следующим образом:
Моя форма выглядит так:
В определении компонента CustomBoladonesTextInput я передаю refField во внутреннюю опору ref следующим образом:
И вуаля. Все снова работает снова. Надеюсь это поможет
источник
Попробуйте это решение для проблем GitHub React Native.
https://github.com/facebook/react-native/pull/2149#issuecomment-129262565
Вам необходимо использовать ref prop для компонента TextInput.
Затем вам нужно создать функцию, которая вызывается в подпорке onSubmitEditing, которая перемещает фокус на вторую ссылку TextInput.
источник
Использование ссылок обратного вызова вместо устаревшей ссылки:
источник
И добавьте метод
onSubmitEditing={() => this.focusTextInput(this.refs.password)}
как показано ниже:источник
Чтобы принятое решение работало, если вы
TextInput
находитесь внутри другого компонента, вам нужно «вывести» ссылку изref
родительского контейнера.источник
в вашем компоненте:
Примечание: я использовал,
._root
потому что это ссылка на TextInput в NativeBase'Library 'Inputи в ваших текстовых входах, как это
источник
и добавить метод
источник
Есть способ захвата вкладок в
TextInput
. Хакерство, но лучше, чем ничего .Определите
onChangeText
обработчик, который сравнивает новое входное значение со старым, проверяя наличие\t
. Если он найден, продвиньте поле, как показано @boredgamesПредполагая, что переменная
username
содержит значение для имени пользователя иsetUsername
отправляет действие для его изменения в хранилище (состояние компонента, хранилище с избыточностью и т. Д.), Сделайте что-то вроде этого:источник
Здесь решение реагента для входного компонента, который имеет свойство: focus.
Поле будет сфокусировано до тех пор, пока этот реквизит установлен на true, и не будет фокусироваться, если это false.
К сожалению, для этого компонента необходимо определить: ref, я не смог найти другой способ вызова .focus (). Я рад предложениям.
https://gist.github.com/Knotschi/6f97efe89681ac149113ddec4c396cc5
источник
swap!
на качествеatom
типа. Согласно документации, это используется для привязки к React: «Любой компонент, который использует атом, автоматически перерисовывается при изменении его значения». reagent-project.github.ioЕсли вы используете NativeBase в качестве компонентов пользовательского интерфейса, вы можете использовать этот пример
источник