Reagire nativo come spostare schermo fino a textinput

Ho una schermata di login creato utilizzando reagire nativo.

Come posso spostare il mio schermo quando l’utente sta digitando nel textInput?

Faccio ad ascoltare la onFocus() eventi e utilizzare lo stile css per modificare lo stile del punto di vista?

InformationsquelleAutor Steve Ng | 2015-05-30

 

8 Replies
  1. 6

    È possibile utilizzare ScrollView per il controllo dello schermo su e giù per i movimenti. Finché l’utente non ha centrato qualsiasi TextInput, è possibile disattivare scorrimento. In sintesi, si tratta solo di spostare la scrollview utilizzando Contenuto Offset prop.

    <TextInput
        onFocus={this.textInputFocused.bind(this)}
      />
    
    textInputFocused() {
    //do your stuff here. scroll screen up
    }

    Speranza che aiuta!

    • non funziona su Android
  2. 14

    Nel 2017 (RN 0.43) c’è un componente speciale per questo: KeyboardAvoidingView

    • non funziona su android
    • funziona, ma con qualche hack. C’è problema su GitHub con soluzioni. Io uso questo: behavior={(Platform.OS === 'ios') ? 'padding' : null}
    • Tipo di merda. Preferisco implementare la tastiera evento da me. perciò è davvero di avere il controllo sul comportamento del vostro Layout
    • Dicembre 2018, sembra di lavorare in Android.
  3. 5

    Notte Fury: la risposta è abbastanza buona, anche se non confusione con la ScrollView del contentOffset, mi piacerebbe usare il 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
      );
    }

    Vedere la definizione di metodo: scrollResponderScrollNativeHandletokeyboard

    • Questo sarà il busto getScrollResponder sto indovinando questo è lavorato su una versione precedente di api. Io uso scrollTo e codificare i numeri la sua orribile soluzione e sono mezzo tentato di usare solo per visualizzazioni web delle pagine del modulo.
    • Funziona bene per spostare lo schermo verso l’alto, cosa devo usare per spostare lo schermo in giù di nuovo dopo finiture di battitura?
  4. 1

    Questo pacchetto fa un grande lavoro, introduce una KeyboardAwareScrollView componente che scorre vista la corrispondenza dell’ingresso con la tastiera, quindi scorrendo indietro.

  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>
    

    Eseguire in snack :
    https://snack.expo.io/H1BE5ZoXV

  6. 0

    E un’altra soluzione, lavorando con RN 0.2, questa volta, invece di schiacciare il contenuto scorre.

     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>
    }
    
  7. 0

    È un tiro di merda per ottenere il nativo tastiera funzionalità di riconoscimento della ScrollView di lavoro. Per la mia app Android, funziona perfettamente in uno schermo che è quasi identico come gli altri per cui non funziona. E su iOS, semplicemente non funziona. Questo è ciò che funziona per me:

    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'
    }
    

    Nota: Questo potrebbe funzionare solo se il <TextInput/> è in fondo allo schermo, che è stato nel mio caso.

    • utilizzare le frecce della funzione da es6 per evitare il metodo bind stackoverflow.com/questions/32192682/… E si può anche migliorare implementando `keyboardWillShow’ su iOS. (non è implementato in Android)
    • Ottimi consigli e suggerimenti. Avevo notato che il frame di risposta del componente TextInput che appaiono sopra la tastiera era un po ‘ dietro. Grazie!

Lascia un commento