react native:js语法 镶嵌布局的使用

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  Image,
  View,
  ScrollView,
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
  'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
  'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {
  render() {
    return (
      
        
          嵌套的网格
        
        
          
            
            
            
            
          
          
            
              
                
                
                
                
              
              
              
            
            
            
          
        
      
    );
  }
}


styles = {

  welcome: {
      fontSize: 20,
      textAlign: 'center',
      margin: 20
  }
}

上述代码运行的效果图:

效果图.png

使用visio code 打开代码 效果分解后看到的效果是

image.png

通过对代码 比对可以看到flex 布局的嵌套使用,和iOS开发布局基本类似

---

作者开发经验总结的文章推荐,持续更新学习心得笔记

五星推荐 Runtime 10种用法（没有比这更全的了）
五星推荐 成为iOS顶尖高手，你必须来这里(这里有最好的开源项目和文章)
五星推荐 iOS逆向Reveal查看任意app 的界面
五星推荐手把手教你使用python自动打包上传应用分发
JSPatch （实时修复App Store bug）学习(一)
iOS 高级工程师是怎么进阶的(补充版20+点)
扩大按钮(UIButton)点击范围(随意方向扩展哦)
最简单的免证书真机调试(原创)
通过分析微信app,学学如何使用@2x,@3x图片
TableView之MVVM与MVC之对比
使用MVVM减少控制器代码实战(减少56%)
ReactiveCocoa添加cocoapods 配置图文教程及坑总结