ReactNativeで中途半端な改行を防ぐ

はじめに

ReactNativeで中途半端な改行を防ごうとしたところ、少し詰まったので記事にしました。

HTML/CSSの場合

HTML側では以下のように意味の塊ごとにspanタグで囲みます。

html

<h1><span>Qiitaの</span><span>記事を</span><span>書く</span></h1>

次にCSS側でinline-blockを設定します。

css

span {
   display: inline-block;
}

ReactNativeの場合

ReactNativeで使用されるJSXでは、divやspanといったDOMを直接書くことができません。
また、スタイリングは通常のcssではなくcss-in-jsで書くため、記法に注意が必要です。

spanタグの代わりにTextタグで囲むことで意味の塊を作り出すことができます。
また、全体をViewで囲み、flexWrapとflexDirectionを設定します。

ReactNative

<View style={{ flexDirection:'row', flexWrap:'wrap' }}>
    <Text>レビューを</Text><Text>追加</Text>
</View>

終わりに

styleを設定せず、Textタグをネストさせてもできるようですが、私の手元では実現できなかったのでViewにスタイルを当てる方法を紹介しました。
短い記事でしたが、読んでいただきありがとうございました。

参考記事