React Native 之基础图层关系

以下代码为工程中的APP.JS文件

export default class App extends Component<> {
  render() {
    return (//此处返回的View就是AppDelegate.m中didFinishLaunchingWithOptions的RCTRootView
      <View style={mystyles.backView}>
        <Text>独孤求败</Text>
        <View style={mystyles.two}>
          <Text>东方不败</Text>
        </View>
        <View style={mystyles.three}>
          <Text>独孤酒剑</Text>
        </View>
      </View>
    );
  }
}

const mystyles = StyleSheet.create({
  backView: {//这个设置的是**层级分析图**中的RCTView图层
      width:300,
      height:100,
      backgroundColor: 'red',
  },
    two:{  //由于孤独求败属于块级标签,故东方不败这个块级标签紧贴孤独求败这个text大小
      width:200,
        height:100,
        backgroundColor:'green',

    },
    three:{
        width:200,
        height:100,
        backgroundColor:'yellow',
    },

});

效果如下图

image.png

层级分析图##

image.png