css - Simulate display: inline in React Native -
react native doesn't support css display property, , default elements use behavior of display: flex (no inline-flex either). non-flex layouts can simulated flex properties, i'm flustered inline text.
my app has container contains several words in text, of need formatting. means need use spans accomplish formatting. in order achieve wrapping of spans, can set container use flex-wrap: wrap, allow wrapping @ end of span rather traditional inline behavior of wrapping @ word breaks.
the problem visualized (spans in yellow):
(via http://codepen.io/anon/pen/gowmdm?editors=110)
is there way proper wrapping , true inline simulation using flex properties?
you can effect wrapping text elements in other text elements way wrap span in div or element:
<view> <text><text>this writing should fill of container </text><text>this writing should fill of container</text></text> </view> you can effect declaring flexdirection:'row' property on parent along flexwrap: 'wrap'. children display inline:
<view style={{flexdirection:'row', flexwrap:'wrap'}}> <text>one</text><text>two</text><text>three</text><text>four</text><text>five</text> </view> check out this example.

Comments
Post a Comment