/**
 * 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 (
      <View >
        <Text style={styles.welcome}>
          嵌套的网格
        </Text>
        <View style={{ flexDirection: 'column', height: 200, backgroundColor: "#cefefe", margin: 0 }}>
          <View style={{ flex: 1, flexDirection: 'column', padding: 5, backgroundColor: "#eeeeee" }}>
            <View style={{ flex: 2, backgroundColor: "yellow" }}>
            </View>
            <View style={{ flex: 1, backgroundColor: "#6abbaa" }}>
            </View>
          </View>
          <View style={{ flex: 1, padding: 5, flexDirection: 'row', backgroundColor: "#7eeeee" }}>
            <View style={{ flex: 2, backgroundColor: "#aaaabb" }}>
              <View style={{ flex: 1, flexDirection: 'row', backgroundColor: "red" }}>
                <View style={{ flex: 1, backgroundColor: "green", padding: 5 }}>
                </View>
                <View style={{ flex: 1, backgroundColor: "#bbccee", padding: 10 }}>
                </View>
              </View>
              <View style={{ flex: 1, backgroundColor: "#eebbdd", padding: 5 }}>
              </View>
            </View>
            <View style={{ flex: 1, backgroundColor: "#aaccaa" }}>
            </View>
          </View>
        </View>
      </View>
    );
  }
}


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 配置图文教程及坑总结