Réagir indigènes comment faire pour déplacer l'écran vers le haut sur textinput

J'ai un écran de connexion créés à l'aide de réagir indigènes.

Comment puis-je modifier mon écran quand l'utilisateur tape dans la textInput?

Dois-je écouter le onFocus() événement et d'utiliser le style css pour modifier le style de la vue?

InformationsquelleAutor Steve Ng | 2015-05-30
  1. 6

    Vous pouvez utiliser Le ScrollView de contrôle de l'écran vers le haut et vers le bas. Tant que l'utilisateur n'a pas porté tout TextInput, vous pouvez désactiver le défilement. Sur l'accent, juste passer la scrollview à l'aide de Le Décalage Du Contenu prop.

    <TextInput
    onFocus={this.textInputFocused.bind(this)}
  />

textInputFocused() {
//do your stuff here. scroll screen up
}

    Espère que cela aide!

    • ne fonctionne pas sur Android
    InformationsquelleAutor NightFury
  2. 13

    En 2017 (RN 0.43) il existe une composante spéciale pour cela: KeyboardAvoidingView

    • ne fonctionne pas sur android
    • il fonctionne, mais avec quelques hacks. Il y a question sur GitHub avec des solutions. J'utilise celui-ci: behavior={(Platform.OS === 'ios') ? 'padding' : null}
    • Genre de merde. Je préfère mettre en œuvre l'événement de clavier par moi-même. donc, vous avez vraiment de contrôle sur le comportement de votre Mise en page
    • En décembre 2018, il semble fonctionner en Android ainsi.
    InformationsquelleAutor Aleksandr Mansurov
  3. 5

    Nuit fureurs de réponse est assez bonne, bien que ne serait pas de chichi avec la ScrollView de contentOffset, j'utiliserais ScrollResponder:

    render() {
  return (
    <ScrollView ref="myScrollView">
      <TextInput
        ref="myInput"
        onFocus={this._scrollToInput.bind(this)}
      />
    </ScrollView>
  );
}

_scrollToInput {
  const scrollResponder = this.refs.myScrollView.getScrollResponder();
  const inputHandle = React.findNodeHandle(this.refs.myInput)

  scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
    inputHandle, //The TextInput node handle
    0, //The scroll view's bottom "contentInset" (default 0)
    true //Prevent negative scrolling
  );
}

    Voir la définition de la méthode: scrollResponderScrollNativeHandletokeyboard

    • Ce sera buste sur getScrollResponder je devine que c'est travaillé sur une ancienne version de l'api. J'utilise scrollTo et de coder en dur les numéros de son horrible solution et je suis à moitié tenté d'utiliser webviews pour les pages de formulaire.
    • Il fonctionne très bien pour déplacer l'écran vers le haut, que dois-je utiliser pour déplacer l'écran vers le bas à nouveau, après des finitions de frappe?
    InformationsquelleAutor Philipp von Weitershausen
  4. 1

    Ce package fait un grand travail, introduit une KeyboardAwareScrollView composant qui permet de faire défiler l'affichage jusqu'à la correspondance de la saisie avec le clavier, faites défiler vers le bas.

    InformationsquelleAutor Amr Draz
  5. 1
    import {KeyboardAvoidingView} from 'react-native';

<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>

    <Text style={{height: 100, marginTop: 30}}> test text before input</Text>
    <Text style={{height: 100, marginTop: 30}}> test text before input</Text>
    <Text style={{height: 100, marginTop: 30}}> test text before input</Text>
    <Text style={{height: 100, marginTop: 30}}> test text before input</Text>
    <Text style={{height: 100, marginTop: 30}}> test text before input</Text>

    <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
    />

    <Text style={{height: 100, marginTop: 20}}>1 test text after input</Text>
    <Text style={{height: 100, marginTop: 20}}>2 test text after input</Text>
    <Text style={{height: 100, marginTop: 20}}>3 test text after input</Text>
    <Text style={{height: 100, marginTop: 20}}>4 test text after input</Text>
    <Text style={{height: 100, marginTop: 20}}>5 test text after input</Text>

</KeyboardAvoidingView>

    Exécuter en collation :
    https://snack.expo.io/H1BE5ZoXV

    InformationsquelleAutor Mahdi Bashirpour
  6. 0

    Et une autre solution, travail avec la RN 0.2, cette fois, au lieu d'écraser le contenu qui défile.

     inputFocused: function(ref) {
   this._scroll(ref, 75);
 },

 inputBlurred: function(ref) {
   this._scroll(ref, 0);
 },

 _scroll: function(ref, offset) {
   setTimeout(() => {
     var scrollResponder = this.refs.myScrollView.getScrollResponder();
     scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
                React.findNodeHandle(this.refs[ref]),
                offset,
                true
            );
     });
  },

    ...

    render: function() {
  return <View style={{flex: 1}}> 
    <ScrollView ref="myScrollView" keyboardDismissMode='interactive' contentContainerStyle={{flex: 1}}>
      <TextInput
        ref="myInput"
        onFocus={this.inputFocused.bind(this, 'myInput')}
        onBlur={this.inputBlurred.bind(this, 'myInput')} />
    </ScrollView>
  </View>
}
    InformationsquelleAutor pomo
  7. 0

    C'est un shoot merde pour obtenir le clavier natif de sensibilisation à la fonctionnalité de la ScrollView de travail. Pour mon application Android, il fonctionne parfaitement sur un écran qui est presque identique que les autres pour ce qui ne fonctionne pas. Et sur iOS, il ne fonctionne tout simplement pas. C'est ce qui fonctionne pour moi:

    import { Keyboard, ScrollView, StyleSheet, View } from 'react-native';

this.state = {
    filler: false,
}

componentWillMount() {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
}

componentWillUnmount() {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
}

_keyboardDidShow() {
    this.setState({filler: true})
    setTimeout(() => this.vertical && this.vertical.scrollToEnd({animated: true}), 0);
}

_keyboardDidHide() {
    this.setState({filler: false})
}


...
return (
  <ScrollView ref={ref => this.vertical = ref}>
    <TextInput/>
    { this.state.filler ? <View style={styles.filler}/> : null }
  </ScrollView>
)

styles.filler = {
    height: 'Keyboard Height'
}

    Remarque: Ce peut ne fonctionner que si votre <TextInput/> est au bas de l'écran, il était dans mon cas.

    • utiliser la flèche en fonction de es6 pour éviter la méthode bind stackoverflow.com/questions/32192682/... Et vous pouvez également améliorer par la mise en œuvre de "keyboardWillShow" sur iOS. (n'est pas implémenté sur Android)
    • D'excellentes suggestions. J'ai remarqué que le cadre de la réponse de la TextInput apparaissant au-dessus du clavier était un peu derrière. Merci!
    InformationsquelleAutor Friendly-Robot
  8. 0

    Essayer de mettre multiline={true} prop pour le TextInput. Il a travaillé pour moi.

    InformationsquelleAutor Dror Bar