例如,我有一个元素,我想让它向右浮动
<View style={{width: 300}}>
<Text style={{backgroundColor: "#DDD"}}>Hello</Text>
</View>
如何将文本浮动/对齐到右边?另外,为什么文本占用了视图的全部空间,而不是只占用“Hello”的空间?
例如,我有一个元素,我想让它向右浮动
<View style={{width: 300}}>
<Text style={{backgroundColor: "#DDD"}}>Hello</Text>
</View>
如何将文本浮动/对齐到右边?另外,为什么文本占用了视图的全部空间,而不是只占用“Hello”的空间?
当前回答
你可以直接指定项目的对齐方式,例如:
textright: {
alignSelf: 'flex-end',
},
其他回答
在视图样式中使用flex: 1和alignItems: 'flex-end'。确保包含flex:这是使元素正确浮动的关键
使用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>
你不应该在React Native中使用浮动。React Native利用flexbox来处理所有这些事情。
在本例中,您可能希望容器具有属性
justifyContent: 'flex-end'
关于文字占据整个空间,你需要看一下你的容器。
这里有一个链接到非常棒的flexbox指南:一个完整的flexbox指南
你可以直接指定项目的对齐方式,例如:
textright: {
alignSelf: 'flex-end',
},
你可以用alignSelf: 'flex-end'设置文本样式:
<View style={{width: 300}}>
<Text style={{backgroundColor: "#DDD", alignSelf: 'flex-end'}}>Hello</Text>
</View>