どうすればフローティングできますか？

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

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

どのTextようにしてフロート/右揃えにすることができますか？また、「こんにちは」のスペースだけでなく、のTextスペース全体を占めるのはなぜViewですか。

テキストが「Hello」のスペースだけでなく、ビューのスペース全体を占めるのはなぜですか？

そのためView、フレックスコンテナであり、デフォルトでありflexDirection: 'column'かつalignItems: 'stretch'、その子はその幅を埋めるために伸ばしてしなければならないことを意味しています。

あたり（注、ドキュメントことを、すべてのコンポーネントがネイティブに反応するdisplay: 'flex'デフォルトでは、それがdisplay: 'inline'すべてでは存在しません。このように、デフォルトの動作。Text内Viewでは、デフォルトの動作からネイティブ異なりリアクトspan内divウェブ上に。後者の場合、a はデフォルトでインライン要素であるため、スパンはの幅を埋めません。ReactNativeにはそのような概念はありません。）divspan

テキストをどのようにしてフローティング/右揃えにすることができますか？

floatプロパティは、ネイティブに反応は存在しませんが、ある負荷、あなたのテキストを右揃えさせます（わずかに異なる振る舞いを持つ）使用できるオプションのは。ここに私が考えることができるものがあります：

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>

このアプローチは、https：//stackoverflow.com/a/34063808/1709587で、Webおよび実際のCSSのコンテキストで示されています。

6. position: 'absolute'とright: 0上Text：

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

実際のCSSと同様に、これはText「フローから外れる」ことを意味します。つまり、兄弟はそれと重なり合うことができ、その垂直位置はViewデフォルトで上部にあります（ただし、上部からの距離を明示的に設定できます）スタイルプロパティViewを使用top）。

当然のことながら、これらのさまざまなアプローチのどれを使用したいか、そしてそれらの間の選択がまったく重要であるかどうかは、あなたの正確な状況に依存します。

アイテムの配置を直接指定できます。次に例を示します。

textright: {    
  alignSelf: 'flex-end',  
},

私にとってalignItems、親に設定することは、次のようなトリックを行いました：

var styles = StyleSheet.create({
  container: {
    alignItems: 'flex-end'
  }
});

React Nativeでフロートを使用することは想定されていません。React Nativeはフレックスボックスを利用して、これらすべてを処理します。

あなたの場合、おそらくコンテナに属性を持たせたいでしょう

justifyContent: 'flex-end'

スペース全体を占めるテキストについても、コンテナを確認する必要があります。

flexboxに関する非常に優れたガイドへのリンクは次のとおりです。Flexbox の完全ガイド

<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>
  <Text>
  Some Text
  </Text>
</View>

flexDirection：水平方向（行）または垂直方向（列）に移動する場合

justifyContent：移動したい方向。

flexを使用して、ネイティブの反応でfloat：rightを実行できます。

 <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>

詳細：https : //facebook.github.io/react-native/docs/flexbox.html#flex-direction