react-native-flex-container

最新推荐文章于 2023-05-25 08:44:17 发布

麦子的小库存

最新推荐文章于 2023-05-25 08:44:17 发布

阅读量177

点赞数

本文链接：https://blog.csdn.net/qq_36162529/article/details/84989546

版权

1.样式一：

export default class App extends Component<Props> {
 render() {
   return (
     <View style={style.container}>
       <View style={style.subBox}>
         <Text style={style.text}>subBox1</Text>
       </View>
       <View style={style.subBox}>
         <Text style={style.text}>subBox2</Text>
       </View>
       <View style={style.subBox}>
         <Text style={style.text}>subBox3</Text>
       </View>
     </View>
   );
 }
}
const style = StyleSheet.create({
   container:{
     display:'flex',
     flexDirection:'column',//此处修改了
     backgroundColor:'skyblue',
     height:500
   },
   subBox:{
     backgroundColor:"red"
   }
 })

在这里插入图片描述
2.样式二：

const style = StyleSheet.create({
   container:{
     display:'flex',
     flexDirection:'row', //此处修改了
     backgroundColor:'skyblue',
     height:500
   }
 })

在这里插入图片描述
3.样式三：

const style = StyleSheet.create({
   container:{
     display:'flex',
     flexDirection:'column',
     justifyContent:'flex-start', //此处修改了
     backgroundColor:'skyblue',
     height:500
   }
 })

在这里插入图片描述
4.样式四：

const style = StyleSheet.create({
   container:{
     display:'flex',
     flexDirection:'column',
     justifyContent:'flex-end', //此处修改了
     backgroundColor:'skyblue',
     height:500
   }
 })

在这里插入图片描述
5.样式五：

const style = StyleSheet.create({
   container:{
     display:'flex',
     flexDirection:'column',
     justifyContent:'center', //此处修改了
     backgroundColor:'skyblue',
     height:500
   }
 })

在这里插入图片描述
6.样式六：

const style = StyleSheet.create({
   container:{
     display:'flex',
     flexDirection:'row',//此处修改了
     justifyContent:'center', 
     backgroundColor:'skyblue',
     height:500
   }
 })

在这里插入图片描述
7.样式七：

const style = StyleSheet.create({
   container:{
     display:'flex',
     flexDirection:'column',//此处修改了
     justifyContent:'space-between', //此处修改了
     backgroundColor:'skyblue',
     height:500
   }
 })

在这里插入图片描述
8.样式八：

const style = StyleSheet.create({
   container:{
     display:'flex',
     flexDirection:'column',
     justifyContent:'space-around', //此处修改了
     backgroundColor:'skyblue',
     height:500
   }
 })

在这里插入图片描述
9.样式九：

const style = StyleSheet.create({
   container:{
     display:'flex',
     flexDirection:'column',
     justifyContent:'space-around', //此处修改了
     flexWrap:'wrap',//此处修改了
     backgroundColor:'skyblue',
     height:500
   }
 })

在这里插入图片描述
10.样式十：

const style = StyleSheet.create({
   container:{
     display:'flex',
     flexDirection:'column',
     justifyContent:'space-around', 
     flexWrap:'wrap',
     alignItems:'strentch',//此处修改了
     backgroundColor:'skyblue',
     height:500
   }
 })

在这里插入图片描述
11.样式十一：

const style = StyleSheet.create({
   container:{
     display:'flex',
     flexDirection:'column',
     justifyContent:'space-around', 
     flexWrap:'wrap',
     alignItems:'flex-start',//此处修改了
     backgroundColor:'skyblue',
     height:500
   }
 })

在这里插入图片描述
12.样式十二：

const style = StyleSheet.create({
   container:{
     display:'flex',
     flexDirection:'column',
     justifyContent:'space-around', 
     flexWrap:'wrap',
     alignItems:'flex-end',//此处修改了
     backgroundColor:'skyblue',
     height:500
   }
 })

在这里插入图片描述
13.样式十三：

const style = StyleSheet.create({
   container:{
     display:'flex',
     flexDirection:'column',
     justifyContent:'space-around', 
     flexWrap:'wrap',
     alignItems:'center',//此处修改了
     backgroundColor:'skyblue',
     height:500
   }
 })