KeyboardAvoidingView has no effect on multiline TextInput
Nessuno ha ancora preso questa issue.
- Lingua principale
- C++
- Stelle
- 127k
- Fork
- 25.3k
- Merge medio
- 1g 23h
- PR unite (30g)
- 4
Descrizione
KeyboardAvoidingView only works with single-line TextInputs. When the multiline prop is set, KeyboardAvoidingView does not shift the TextInput at all.
Is this a bug report?
Yes
Have you read the Contributing Guidelines?
Yes
Environment
Environment:
OS: macOS Sierra 10.12.6
Node: 7.0.0
npm: 3.10.8
Watchman: 4.7.0
Xcode: 9.1
Packages: (wanted => installed)
react-native: 0.49.3
react: 16.0.0-beta.5
Target Platform: iOS (10.3)
Steps to Reproduce
- Use a
<TextInput>component withmultilineprop set. - Wrap this in a ScrollView
- Wrap that in a KeyboardAvoidingView.
Expected Behavior
Multiline TextInput should scroll above the soft keyboard.
Actual Behavior
Soft keyboard covers multiline TextInput.
Reproducible Demo
import React, { Component } from 'react';
import { Text, TextInput, View, ScrollView, KeyboardAvoidingView, Keyboard} from 'react-native';
...
render() {
return (
<KeyboardAvoidingView style={{flex:1}} behavior="padding" keyboardVerticalOffset={64}>
<ScrollView keyboardShouldPersistTaps={'handled'}>
<View style={{padding: 12}}>
// various content to fill the page
<Text style={{fontSize: 20, padding: 40}}>MESSAGE 1</Text>
<Text style={{fontSize: 20, padding: 40}}>MESSAGE 2</Text>
<Text style={{fontSize: 20, padding: 40}}>MESSAGE 3</Text>
<Text style={{fontSize: 20, padding: 40}}>MESSAGE 4</Text>
<Text style={{fontSize: 20, padding: 40}}>MESSAGE 5</Text>
<Text style={{fontSize: 20, padding: 40}}>MESSAGE 6</Text>
<Text style={{fontSize: 20, padding: 40}}>MESSAGE 7</Text>
<Text style={{fontSize: 20, padding: 40}}>MESSAGE 8</Text>
<Text style={{fontSize: 20, padding: 40}}>MESSAGE 9</Text>
<Text style={{fontSize: 20, padding: 40}}>MESSAGE 10</Text>
</View>
<TextInput
style={{padding: 4}}
multiline={true}
placeholder={'Type something here...'}
onChangeText={this.updateMessage}
value={this.state.message}
/>
</ScrollView>
</KeyboardAvoidingView>
);
}
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Inizia eseguendo la riproduzione iOS fornita con KeyboardAvoidingView, ScrollView e un TextInput multilinea, quindi traccia il comportamento rilevante di React Native per la gestione dell’evitamento della tastiera e dell’input di testo. Il lavoro è completato quando l’input multilinea viene fatto scorrere sopra la tastiera virtuale nella configurazione segnalata, senza regressioni nel caso a riga singola.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- react-native
- Ambito
- mobile
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Tranquilla
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 45/100