如何在React Native中浮动?

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

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

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

当前回答

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

2021-07-06 16:09:13

其他回答

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

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

2021-09-28 07:23:40

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

2021-07-06 16:09:13

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

2020-08-29 14:57:13

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

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

2023-01-04 13:46:10

你可以在react native中使用flex:

 <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

2018-06-22 05:43:17

如何在React Native中浮动?

推荐文章

最新文章

标签