[React-Native]flex-box实践(一)

  • 如果你希望文字居中显示,那么可以为Text包裹一个View
container: {
        justifyContent: 'center',
        alignItems: 'center'
    },

然后,在被包裹的Text中书写文字

 <View style={styles.container}>
      <Text style={styles.textStyle}>
           login
       </Text>
</View>
  • 一种较为常见的布局
flex-box_Demo

这种样式的实现:

  container: {
        flex: 1,
        backgroundColor: '#f4f4f4',
        flexDirection: 'column',
    },

    child: {
        height: 50,
        backgroundColor: 'white',
        // 这是一个重要的实现
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },

关键点在于,你需要在child中设置该Child的flex方向,并设置

 justifyContent: 'space-between',
 alignItems: 'center'
  • 最下部view的排列
flex-box_demo
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,513评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,617评论 0 26
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,142评论 25 708
  • 即是相逢不似初,此时相遇已成虚。 百年酒里半生泪,千古愁余一纸书。 绚烂烟霞能共赏,皎然月色可同拘? 夜长最易牵思...
    胡清隐阅读 305评论 5 5
  • 今日始收获内心之平静。接受了一些无法改变的事情之后,心情也会变得更美好。不再是排斥,而是如何去珍惜,如何去解决,以...
    骷髅心阅读 304评论 0 0