まちお開発日記 ~ machio Development Diary ~

思いつきで技術的なことをつらつらと

React Nativeでinline要素を実装する方法

React Nativeのstyleにはdisplay属性が存在しない

HTML / CSSならまずspanタグを使えばいいし、最悪 “display: inline” で無理やりinline要素にしてしまえばいいわけですが、React NativeのStyleSheetには生憎displayを指定できる要素がない。

なのでflexを使用してinline要素を自分で実装する必要がある。

解決策

具体的には以下のコードを横並びにしたいコンポーネントの親に追加する。

//inline要素にしたいものの親コンポーネント
contentsWrapper: {
    flexWrap: 'wrap', // flexコンテナからはみ出した時、改行して表示されるようにする
    alignItems: 'flex-start', // flexアイテムを左詰めにする
    flexDirection:'row' // flexアイテムの並ぶ向きをHorizontalにする
}

これでinline要素のような挙動を実装できます。