React NativeのTextInputでAndroidの改行ができない

@iwasaki 35views 更新:2017年6月26日

React NativeのTextInputをAndroidで使った際にEnterキーでの改行ができないことがあります。

該当するIssueはこちら

https://github.com/facebook/react-native/issues/12717

これに対応してコンポーネント化されたものがこちらになります。

https://gist.github.com/catchin/47afe706256604959c13dc25e7bb9383

使い方としては以下のようにして使います。

<MultilineTextInput value={this.state.text} onChangeText={text => setState({text})} />

なお1点問題があり、現時点において自動での高さ調整がうまくいきません。

onSubmitEditing のメソッドで、改行コードを挿入したテキストを生成し、onChangeText メソッドを呼んでいます。

onSubmitEditing も onChangeText も event を受け取らないため、 onChange や onContentSizeChange などで行う高さの自動調整に対して伝搬することができないため別途何らかの方法を取る必要があります。

なお、onChangeTextでeventを受け取りたい場合には、onChangeを使って event.nativeEvent.text でテキストを受け取るようにします。

https://stackoverflow.com/questions/38046865/react-native-event

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません