Comment autofocus prochaine TextInput sur réagir indigènes
Je suis en train de créer un mot de passe protégé de l'écran. L'écran utilise 4 entrée numérique que le mot de passe.
La façon dont je suis en train de faire c'est de créer un Composant TextInput et de l'appeler 4 fois dans mon écran principal.
Le problème, je vais avoir, c'est la TextInputs ne va pas se concentrer sur le prochain comme je le type de la valeur de la précédente TextInput.
Je suis à l'aide de références pour tous les PasscodeTextInput composant (j'ai été informé que c'est un héritage de la méthode, mais je ne sais pas de toute autre manière, hélas).
Essayé cette méthode(sans créer mon propre composant), pas de chance aussi.
MÉTHODE
index.ios.js
import React, { Component } from 'react';
import { AppRegistry, TextInput, View, Text } from 'react-native';
import { PasscodeTextInput } from './common';
export default class ProgressBar extends Component {
render() {
const { centerEverything, container, passcodeContainer, textInputStyle} = styles;
return (
<View style={[centerEverything, container]}>
<View style={[passcodeContainer]}>
<PasscodeTextInput
autoFocus={true}
ref="passcode1"
onSubmitEditing={(event) => { this.refs.passcode2.focus() }} />
<PasscodeTextInput
ref="passcode2"
onSubmitEditing={(event) => { this.refs.passcode3.focus() }} />
<PasscodeTextInput
ref="passcode3"
onSubmitEditing={(event) => { this.refs.passcode4.focus() }}/>
<PasscodeTextInput
ref="passcode4" />
</View>
</View>
);
}
}
const styles = {
centerEverything: {
justifyContent: 'center',
alignItems: 'center',
},
container: {
flex: 1,
backgroundColor: '#E7DDD3',
},
passcodeContainer: {
flexDirection: 'row',
},
}
AppRegistry.registerComponent('ProgressBar', () => ProgressBar);
PasscodeTextInput.js
import React from 'react';
import {
View,
Text,
TextInput,
Dimensions
} from 'react-native';
const deviceWidth = require('Dimensions').get('window').width;
const deviceHeight = require('Dimensions').get('window').height;
const PasscodeTextInput = ({ ref, autoFocus, onSubmitEditing, onChangeText, value}) => {
const { inputStyle, underlineStyle } = styles;
return(
<View>
<TextInput
ref={ref}
autoFocus={autoFocus}
onSubmitEditing={onSubmitEditing}
style={[inputStyle]}
maxLength={1}
keyboardType="numeric"
placeholderTextColor="#212121"
secureTextEntry={true}
onChangeText={onChangeText}
value={value}
/>
<View style={underlineStyle} />
</View>
);
}
const styles = {
inputStyle: {
height: 80,
width: 60,
fontSize: 50,
color: '#212121',
fontSize: 40,
padding: 18,
margin: 10,
marginBottom: 0
},
underlineStyle: {
width: 60,
height: 4,
backgroundColor: '#202020',
marginLeft: 10
}
}
export { PasscodeTextInput };
Mise à jour de 1
index.ios.js
import React, { Component } from 'react';
import { AppRegistry, TextInput, View, Text } from 'react-native';
import { PasscodeTextInput } from './common';
export default class ProgressBar extends Component {
constructor() {
super()
this.state = {
autoFocus1: true,
autoFocus2: false,
autoFocus3: false,
autoFocus4: false,
}
}
onTextChanged(t) { //callback for immediate state change
if (t == 2) { this.setState({ autoFocus1: false, autoFocus2: true }, () => { console.log(this.state) }) }
if (t == 3) { this.setState({ autoFocus2: false, autoFocus3: true }, () => { console.log(this.state) }) }
if (t == 4) { this.setState({ autoFocus3: false, autoFocus4: true }, () => { console.log(this.state) }) }
}
render() {
const { centerEverything, container, passcodeContainer, testShit, textInputStyle } = styles;
return (
<View style={[centerEverything, container]}>
<View style={[passcodeContainer]}>
<PasscodeTextInput
autoFocus={this.state.autoFocus1}
onChangeText={() => this.onTextChanged(2)} />
<PasscodeTextInput
autoFocus={this.state.autoFocus2}
onChangeText={() => this.onTextChanged(3)} />
<PasscodeTextInput
autoFocus={this.state.autoFocus3}
onChangeText={() => this.onTextChanged(4)} />
<PasscodeTextInput
autoFocus={this.state.autoFocus4} />
</View>
</View>
);
}
}
const styles = {
centerEverything: {
justifyContent: 'center',
alignItems: 'center',
},
container: {
flex: 1,
backgroundColor: '#E7DDD3',
},
passcodeContainer: {
flexDirection: 'row',
},
}
AppRegistry.registerComponent('ProgressBar', () => ProgressBar);
Le focus() la méthode est obsolète... et la réponse de mitch n'est pas utilisable après 0.40 stackoverflow.com/a/41201939/5809351
Je suppose que vous pouvez éviter d'avoir l'état de la société mère à tous, il suffit de faire un focus d'une 1ère entrée dans
componentDidMount
et votre onTextChanged
méthode peut ressembler à quelque chose comme ceci if t == 1 or 2 or 3 then focus the t+1'th input
comment faire un focus sur componentDidMount? La gestion de l'état dans componentDidMount est décourageant, l'esprit de partager un peu de code?
Bien sûr, depuis le
componentDidMount
est invoquée après l' render
méthode, cela signifie que les éléments ont déjà été rendus, et nous avons maintenant accès via refs
: this.refs.passcode1.focus()
OriginalL'auteur J.Doe | 2017-02-21
Vous devez vous connecter pour publier un commentaire.
Vous ne pouvez pas transférer le
ref
à<TextInput>
à l'aide de cette façon, parce queref
est l'un des accessoires spéciaux. Ainsi, l'appel dethis.refs.passcode2
sera de retour que vous<PasscodeTextInput>
à la place.Essayez de changer à la suivante, pour obtenir le
ref
de<TextInput>
.PasscodeTextInput.js
Ensuite, attribuer la
inputRef
de<PasscodeTextInput>
à une variable et utiliserfocus()
de basculer le focus (il n'est pas obsolète depuis la RN0.41.2
).index.ios.js
P. S:
event && this.passcode2.focus()
empêche l'accent est mis lors de la tentative d'effacer l'ancien mot de passe et entrez-en un nouveau.Merci pour le code. Avez-vous retiré sur la touche supprimer de la presse?
OriginalL'auteur max23_
Il y a un defaultProp pour TextInput où l'on peut mettre l'accent, après composant monté.
Si la valeur est true, la porte de l'entrée sur componentDidMount, la valeur par défaut est false. pour plus d'informations, veuillez lire les Docs.
Mise à JOUR
Après
componentDidUpdate
il ne fonctionnera pas correctement. Dans ce cas, on peut utiliserref
à l'accent de la programmation.componentDidUpdate
il ne fonctionne pas correctement.Dans ce cas, on peut utiliser la réf pour l'accent de la programmation. tout en indiquant une option.
Merci beaucoup, je upvoted vous, s'il vous plaît ajouter cette exception pour votre réponse par un
#UPDATE
badge. merciFait @AmerllicA
Merci pour votre attention. Aussi, j'ai ajouter un peu modifier pour une meilleure lisibilité.
OriginalL'auteur Mukundhan
nous avons traité ce style de l'écran avec une approche différente.
Plutôt que de gérer 4 TextInputs et de gérer la navigation de tout à chacun (et puis de nouveau lorsque l'utilisateur supprime un caractère), nous avons une seule TextInput sur l'écran, mais il est invisible (ie. 0px x 0px) de large, qui a le focus, maxLength et la configuration du clavier, etc.
Ce TextInput prend en entrée de l'utilisateur, mais ne peut pas réellement été vu, comme chaque caractère est tapé à nous rendre le texte saisi comme une série de Vue simple/des éléments de Texte, de style très similaire à la votre écran ci-dessus.
Cette approche a bien fonctionné pour nous, sans avoir besoin de gérer ce que l' "suivant" ou "précédent" TextInput pour se concentrer la prochaine.
La solution sucrée 🙂
OriginalL'auteur crafterm
Vous pouvez utiliser la méthode focus
onChangeText
que Jason a déclaré, en outre, l'ajout demaxLength={1}
peut vous faire passer à la prochaine entrée immédiatement sans vérifier ce qui est ajouté. (juste remarqué son obsolète, mais c'est toujours comment j'ai résolu mon problème et doit faire bien jusqu'à ce que v0.36, et ce lien explique comment vous devez mettre à jour le obsolète fonction).Veuillez noter que mon utilisation de refs sont obsolètes, mais j'ai juste copié le code car je peux vous garantir que travaillais à l'époque (espérons-le, fonctionne maintenant aussi).
Enfin, le problème principal de ce type de mise en œuvre est, une fois que vous essayez de supprimer un numéro de retour arrière de votre focus saute prochain, provoquant de graves UX questions. Toutefois, vous pouvez écouter de la touche de retour arrière d'entrée et de réaliser quelque chose de différent au lieu de se concentrer à l'entrée suivante. Je vais donc laisser un lien là pour vous permettre d'approfondir si vous choisissez d'utiliser ce type de mise en œuvre.
Hacky Solution Décrite Précédemment Question: Si vous cochez ce qui est entré dans
onChangeText
prop avant de faire quoi que ce soit, vous pouvez passer à la prochaine entrée si la valeur est un nombre, sinon (c'est un retour arrière), sauter en arrière. (Juste venu avec cette idée, je n'ai pas essayé.)OriginalL'auteur eden
Je pense que le problème est que
onSubmitEditing
est lorsque vous cliquez sur "retour" ou la touche "enter" sur le clavier... il n'est pas l'un de ces boutons sur le clavier.En supposant que vous voulez que chaque entrée de n'avoir qu'un seul personnage, vous pouvez consulter la
onChangeText
et de vérifier ensuite si le texte est de longueur 1 et appeler focus si la longueur est en effet 1.OriginalL'auteur Jason Gaare