KeyboardAvoidingView has no effect on multiline TextInput
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- C++
- Sterne
- 127k
- Forks
- 25.3k
- Ø Merge
- 1 T. 23 Std.
- Gemergte PRs (30 T.)
- 4
Beschreibung
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>
);
}
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne damit, die bereitgestellte iOS-Reproduktion mit KeyboardAvoidingView, ScrollView und einem mehrzeiligen TextInput auszuführen, und verfolge anschließend das relevante Verhalten von React Native bei der Tastaturvermeidung und der Texteingabe. Erledigt ist die Aufgabe, wenn das mehrzeilige Eingabefeld in der gemeldeten Anordnung über die Bildschirmtastatur gescrollt wird, ohne den einzeiligen Fall zu beeinträchtigen.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- react-native
- Bereich
- mobile
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Ruhig
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 45/100