[解決済み】React Nativeでfloat:rightする方法とは？

質問

右にフロートさせたい要素があります。

<View style={{width: 300}}>
  <Text style={{backgroundColor: "#DDD"}}>Hello</Text>
</View>

どのようにすれば Text 右に浮く/揃う？また、なぜ Text のスペースをフルに使って View のスペースだけでなく、quot;Hello" のスペースも必要ですか？

どのように解決するのですか？

なぜテキストはビューの全領域を占めるのでしょうか？

なぜなら View はフレックスコンテナであり、デフォルトでは flexDirection: 'column' と alignItems: 'stretch' これは、その子がその幅いっぱいに引き伸ばされることを意味します。

(注 ドキュメント ということです。 すべて のコンポーネントは、React Nativeでは display: 'flex' はデフォルトで、その display: 'inline' は全く存在しない。このように、デフォルトの動作として Text の中で View のデフォルトの挙動とは異なります。 span の中で div 後者の場合、スパンは ではなく の幅を埋める。 div なぜなら span はデフォルトでインライン要素です。React Nativeにはそのような概念はありません)。

テキストをフロートさせる/右寄せにする方法は？

その float プロパティは React Native には存在しませんが、React Native には ロード のオプションがあり、テキストを右寄せにすることができます（動作は若干異なります）。以下は、私が思いつくものです。

1. 使用方法 textAlign: 'right' の上に Text 要素

<View>
  <Text style={{textAlign: 'right'}}>Hello, World!</Text>
</View>

(この方法だと Text の幅をすべて埋める。 View の中のテキストを右寄せにするだけです。 Text .)

2. 使用方法 alignSelf: 'flex-end' の上に Text

<View>
  <Text style={{alignSelf: 'flex-end'}}>Hello, World!</Text>
</View>

これは Text 要素をその内容を保持するのに必要な大きさにし、それを View .

3. 使用方法 alignItems: 'flex-end' の上に View

<View style={{alignItems: 'flex-end'}}>
  <Text>Hello, World!</Text>
</View>

を設定することと同じです。 alignSelf: 'flex-end' のすべての View の子である。

4. 使用方法 flexDirection: 'row' と justifyContent: 'flex-end' を使用します。 View

<View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
  <Text>Hello, World!</Text>
</View>

flexDirection: 'row' は、レイアウトの主な方向を縦方向ではなく横方向に設定します。 justifyContent は、ちょうど alignItems しかし、十字方向ではなく、主方向のアライメントを制御します。

5. 使用方法 flexDirection: 'row' の上に View と marginLeft: 'auto' を使用します。 Text

<View style={{flexDirection: 'row'}}>
  <Text style={{marginLeft: 'auto'}}>Hello, World!</Text>
</View>

この方法は、ウェブと実際のCSSの文脈で、次のように示されます。 https://stackoverflow.com/a/34063808/1709587 .

6. 使用方法 position: 'absolute' と right: 0 を使用します。 Text :

<View>
  <Text style={{position: 'absolute', right: 0}}>Hello, World!</Text>
</View>

実際のCSSと同様に、これは Text つまり、兄弟が重なって、その縦位置が View の上端からの距離を明示的に設定することができます）。 View を使用して top スタイルプロパティ)。

もちろん、どの方法を使うか、またその選択が重要かどうかは、あなたの正確な状況によって決まります。