リアクションネイティブのインライン表示

Question

リアクションネイティブはCSS displayプロパティをサポートしておらず、デフォルトではすべての要素がdisplay: flex（どちらもinline-flex）の動作を使用しています。ほとんどの非フレックスレイアウトは、フレックスプロパティでシミュレートできますが、私はインラインテキストに悩まされています。

私のアプリには、いくつかの書式設定が必要なテキストがいくつか含まれています。つまり、フォーマットを実行するためにスパンを使用する必要があります。スパンの折り返しを実現するには、コンテナをflex-wrap: wrapに設定することができますが、これは伝統的な改行での折り返しのインライン動作ではなく、スパンの終わりにのみ折り返しを可能にします。

問題可視化（黄色でスパン）：

（http://codepen.io/anon/pen/GoWmdm?editors=110経由）

適切なラッピングとフレックスのプロパティを使用して、真のインラインシミュレーションを取得する方法はありますか？

Answer 1

あなたは他のテキスト要素内のテキスト要素にあなたがdiv要素または他の要素にスパンを包むような方法をラップすることにより、この効果を得ることができます。

<View> 
    <Text><Text>This writing should fill most of the container </Text><Text>This writing should fill most of the container</Text></Text>  
</View> 

あなたはまたflexDirectionを宣言することによって、この効果を得ることができます。」親の「row」プロパティーとflexWrap： 'wrap'。子供はインラインで表示されます：

<View style={{flexDirection:'row', flexWrap:'wrap'}}> 
    <Text>one</Text><Text>two</Text><Text>Three</Text><Text>Four</Text><Text>Five</Text> 
</View> 

チェックアウトthis例。 「wrap'`はそれがラップするならば、全体のテキストノードが次の行に流れるようになり、それが最初の行の中に残っているために、テキストの一部が発生することはありません： `flexWrapを追加すること

https://rnplay.org/apps/-rzWGg