React-Native：Text Wrappingを避ける

Question

私は曲のタイトルとその長さを1行に表示します。曲のタイトルには省略符号を付ける必要がありますが、継続時間は省略しないでください。私はいくつかの組み合わせを試してきましたが、長いタイトルの場合はこの作業を正しく行えません。名前に省略記号が表示されたり、継続時間が折り返されたりすると、継続時間が画面から消えます。私はそれがサイズを変えることができるので、期間の固定幅をハードコードすることはできません。おそらく解決策以下

<View style={{flexDirection: 'row'}}> 
    <Text numberOfLines={2} style={{fontSize: 16, textAlign: 'left'}}>{title}</Text> 
    <Text style={{flex: 1, fontSize: 13, textAlign: 'right', marginTop: 2}}>{duration}</Text> 
</View> 

Answer 1

解決策はかなり簡単になりました。完全に直感的ではありませんが、これを解決する方法があります。省略記号が必要なテキストには、flex: 1が必要です。

<View style={{flexDirection: 'row'}}> 
    <Text numberOfLines={1} style={{flex: 1, textAlign: 'left'}}>{title}</Text> 
    <Text style={{textAlign: 'right'}}>{duration}</Text> 
</View> 

Answer 2

はそれがデモのためだ、あなたのcreteria

return (
     <View style={{flexDirection: 'row', flex: 1, justifyContent: 'space-around', marginTop: 50}}> 
      <Text numberOfLines={2} style={{fontSize: 16, flex: 1}}>{title}</Text> 
      <Text style={{fontSize: 13, marginTop: 2}}>{duration}</Text> 
     </View> 
    ); 

詳細はReact-Native: Avoid Text WrappingをREFと親切marginTop: 50を無視してくださいsatify必要があります。

動作しない場合は、確認してください。