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

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

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


当前回答

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

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

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

其他回答

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

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

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

在本例中,您可能希望容器具有属性

justifyContent: 'flex-end'

关于文字占据整个空间,你需要看一下你的容器。

这里有一个链接到非常棒的flexbox指南:一个完整的flexbox指南

const styles = StyleSheet.create({ flowRight: { flex: 1、 justifyContent:“结束”, alignContent:“结束”, }, });

然后调用样式。正合你的风格

使用flex

 <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>

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

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