如何在React Native中浮动?

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

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

如何将文本浮动/对齐到右边?另外，为什么文本占用了视图的全部空间，而不是只占用“Hello”的空间?

当前回答

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

其他回答

你可以用alignSelf: 'flex-end'设置文本样式:

<View style={{width: 300}}>
  <Text style={{backgroundColor: "#DDD", alignSelf: 'flex-end'}}>Hello</Text>
</View>

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

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

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

对我来说，将alignItems设置为父类是可行的，比如:

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

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

flexDirection:如果你想水平移动(行)或垂直移动(列)

内容:你想要移动的方向。

推荐文章