KeyboardAvoidingView has no effect on multiline TextInput
オープン
まだ誰も着手していません。
Bug
Component: TextInput
Platform: iOS
Ran Commands
- 主要言語
- C++
- スター
- 127k
- フォーク
- 25.3k
- 平均マージ
- 1日 23時間
- マージ済み PR(30日)
- 4
説明
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>
);
}
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
まず、KeyboardAvoidingView、ScrollView、複数行の TextInput を使用した提供済みの iOS 再現手順を実行し、続いて React Native のキーボード回避とテキスト入力に関する関連動作を追跡します。報告された構成で複数行入力がソフトキーボードの上までスクロールされ、単一行の場合にリグレッションが発生しなければ完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react-native
- 領域
- mobile
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 静か
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 45/100