iOS开发笔记 一天到晚游泳的余

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 380|回复: 0

[ReactNative] 第二讲 ReactNative中Flexbox简介

[复制链接]
  • TA的每日心情
    发光
    2019-4-19 14:50
  • 签到天数: 366 天

    [LV.9]以坛为家II

    发表于 2017-12-26 16:03:00 | 显示全部楼层 |阅读模式
    1、Html开发中较为流行的是盒子模型,div+css模型,其实原生开发也基本上是这样规律,多个view的组合与嵌套;
    2、Flexbox即css3中的弹性盒子,参考:https://www.w3cschool.cn/css3/2h6g5xoy.html
    3、这里简单地演示几个属性flexDirection、justifyContent、alignItems
    [JavaScript] 纯文本查看 复制代码
    /**
     * 第二部分:组件创建,视图结构
     */
    export default class App extends Component{
        render(){
          return (
            <View style = {style.container}>
                <View style={style.child1}></View>
                <View style={style.child2}></View>
            </View>
          );
        }
    }
    
    /**
     * 第三部分:组件样式集合
     */
    var style = StyleSheet.create({
        container:{
            margin:30,
            width:300,
            height:300,
            backgroundColor:"yellow",
            // 默认flexDirection:"column"纵向排列
            // 设置为横向排列
            flexDirection:"row",
            // 垂直方向居中
            justifyContent:"center",
            // 水平方向居中
            alignItems:"center",
        },
        child1:{
          width:100,
          height:100,
          backgroundColor:"red",
        },
        child2:{
          width:100,
          height:100,
          backgroundColor:"green",
        },
    });
    

    4、效果图:
    Simulator Screen Shot - iPhone 7 - 2017-12-26 at 16.01.15.png
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2020-5-30 10:37 , Processed in 0.120410 second(s), 22 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表