React Native 之基础图层关系

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

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

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