你怎么能在 React Native 中 float: ？

Question

我有一个元素想要向右浮动，例如

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

如何让Text浮动/右对齐？另外，为什么 Text 占据了 View 的全部 space，而不只是 "Hello" 的 space？

Answer 1

你不应该在 React Native 中使用浮动。 React Native 利用 flexbox 来处理所有这些东西。

在您的情况下，您可能希望容器具有属性

justifyContent: 'flex-end'

关于整个文本 space，同样，您需要查看您的容器。

这里是 link 非常棒的 flexbox 指南：A Complete Guide to Flexbox

Answer 2

对我来说，将 alignItems 设置为 parent 就可以了，例如：

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

Answer 3

您可以直接指定项目的对齐方式，例如：

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

Answer 4

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

flexDirection: 如果要水平（行）或垂直（列）移动

justifyContent：你要移动的方向。

Answer 5

why does the Text take up the full space of the View, instead of just the space for "Hello"?

因为 View 是一个弹性容器，默认情况下有 flexDirection: 'column' and alignItems: 'stretch'，这意味着它的 children 应该被拉伸以填满它的宽度。

（注意，根据 the docs，React Native 中的所有组件默认为 display: 'flex' 并且 display: 'inline' 不存在于这样一来，React Native 中 View 中 Text 的默认行为不同于网络上 div 中 span 的默认行为；在后一种情况，span 会 而不是 填充 div 的宽度，因为 span 默认是内联元素。React Native 中没有这样的概念。 )

How can the Text be floated / aligned to the right?

float 属性在 React Native 中不存在，但有 loads 选项可供您使用（行为略有不同）会让你 right-align 你的文字。以下是我能想到的：

1。在 `Text` 元素

上使用 textAlign: 'right'

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

（这种方法不会改变 Text 填充 View 的整个宽度这一事实；它只是 right-align 是 Text 中的文本.)

2。在 `Text`

上使用 alignSelf: 'flex-end'

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

这会将 Text 元素缩小到容纳其内容所需的大小，并将其放在 View 的横向（默认为水平方向）的末端。

3。在 `View`

上使用 alignItems: 'flex-end'

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

这相当于在所有 View 的 children 上设置 alignSelf: 'flex-end'。

4。在 `View`

上使用 flexDirection: 'row' and justifyContent: 'flex-end'

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

flexDirection: 'row' 设置布局的主方向为水平而不是垂直； justifyContent 与 alignItems 类似，但控制的是主方向对齐，而不是横向对齐。

5。在 `Text`

上使用 flexDirection: 'row' on the View and marginLeft: 'auto'

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

这种方法在网络和真实 CSS 的上下文中在 .

进行了演示

6。在 `Text`:

上使用 position: 'absolute' and right: 0

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

就像真实的 CSS 一样，它采用 Text "out of flow"，这意味着它的兄弟姐妹将能够重叠它并且它的垂直位置将在 [= 的顶部=16=] 默认情况下（尽管您可以使用 top 样式属性显式设置距 View 顶部的距离）。

自然地，您想使用这些不同方法中的哪一种——以及它们之间的选择是否重要——将取决于您的具体情况。

Answer 6

您可以 float:right 使用 flex 在 React Native 中：

 <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

Answer 7

使用弹性

 <View style={{ flexDirection: 'row',}}>
                  <Text style={{fontSize: 12, lineHeight: 30, color:'#9394B3' }}>left</Text>
                  <Text style={{ flex:1, fontSize: 16, lineHeight: 30, color:'#1D2359', textAlign:'right' }}>right</Text>
               </View>

Answer 8

在视图样式中使用 flex: 1 和 alignItems: 'flex-end'。确保包含 flex: 1。这是使元素向右浮动

的关键

Answer 9

由于反应中的一些变化，它不再支持右浮动 class 取而代之的是，已经为此创建了一个变量并需要一个值。使用 marginLeft ：“自动”

你怎么能在 React Native 中 float: ？

How can you float: right in React Native?

react-native

1。在 Text 元素

2。在 Text

3。在 View

4。在 View