以前紹介した、React Native でメンション機能を実装できるライブラリ「react-native-controlled-mentions」について、iOS でのちょっとしたバグが修正できたのでまとめ。
バグ…と言っていいのか分かりませんが、iOS で動作確認をした際、メンション機能で「@名前」と入力後、続けてメッセージを入力したら、名前の部分にだけ効いて欲しいテキストスタイルが、メッセージ本文にまで適用されてしまうという現象が発生していました。
Android では問題ないのですが、iOS だと名前入力後にスペースを入れたり改行してみたのですがだめでした…。
で、色々いじった結果、メンション機能で名前を入力したときにその後ろに半角スペースを追加する設定を追加したところ、問題なく動作しました!
サンプルコードは下記の通りです。
const renderMentionSuggestions = renderSuggestions(this.state.members); return (<MentionInput value={this.state.text} onChange={text => this.setState({ text: text })} partTypes={[{ trigger: '@', renderSuggestions: renderMentionSuggestions, textStyle: { fontWeight: 'bold', color: '#608CDB' }, isInsertSpaceAfterMention: true, /* メンションの後ろにスペースを追加する */ }]} placeholder={'メッセージを入力'} />);
追加したのは 9行目の isInsertSpaceAfterMention: true
です。
こちらを入力すると、名前の後ろに半角スペースが追加され、テキストスタイルもメッセージ本文には引き継がれなくなりました!
それにしても、GitHub の動作デモの GIF 画像では、メンションの後ろにスペースがなくても大丈夫だったのに、何故私のアプリではダメなのか…。
使用言語が日本語だからでしょうか?
よく分かりませんが、解決したのでよし!
以上、React Native の「react-native-controlled-mentions」ライブラリでメンション機能を開発した際、メンションのテキストスタイルがその後に入力したメッセージ本文にも引き継がれてしまう時の対処法でした。
ご参考になれば幸いです。