行内にコンテンツを収め、反応ネイティブのオーバーフローを防ぐ方法を教えてください。

Question

私は以下のようなテーブルビューの行を持っています。

<View style={{flexDirection: 'row', justifyContent: 'space-between'}}> 
    <Text>{user.fullName}</Text> 
    <Button/> 
</View> 

上記の名前は左にスティックされ、ボタンは右にスティックされます。

----------------------------------- 
User's Full Name   Button 
----------------------------------- 

ユーザーのフルネームが十分に短い場合は、すべての点で優れています。

ただし、ユーザーの名前が長い場合。 これは見た目です。

----------------------------------- 
User's Very Very Long Full Name   Button 
----------------------------------- 

今、行の内容が行の幅をオーバーフローし、ボタンが画面から外に出て見えなくなります。

私が望むのはこれです。

----------------------------------- 
User's Very Very Long... Button 
----------------------------------- 

フレックスボックスモデルでどのように達成できますか？

nameを成長させて、使用可能な幅を超えないようにするにはどうすればよいですか？

Buttonは、ローカル状態に基づいて拡大または縮小することができます。

また、反応性ネイティブでtext-overflow: ellipsisの同等物がありますか？

Answer 1

テキストのflex:1を残りのフレックスアイテム（ここのボタン）に対して相対的に大きく設定できます。 Buttonにはフレックスセットがありません。必要なだけのスペースを占めます。 numberOfLinesドキュメントを参照してください。テキストを楕円にするには1に設定します

<View style={{flexDirection: 'row', justifyContent: 'space-between'}}> 
    <Text numberOfLines={1} style={{flex:1}}>{user.fullName}</Text> 
    <Button/> 
</View>