react / react/react-native

KeyboardAvoidingView has no effect on multiline TextInput

Offen
#16,826 132 Kommentare 147 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bug Component: TextInput Platform: iOS Ran Commands
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
  1. Use a <TextInput> component with multiline prop set.
  2. Wrap this in a ScrollView
  3. 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

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Ö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

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.