React Native render()分析

RN的render()函数实际上跟iOS的ViewDidLoad()函数相似，返回的就是具体的内容，内容很固定，只能是一个<View>，如以下代码：

export default class Demo extends Component {
  //初始化方法  --> ViewDidLoad --> 返回就是具体的内容
  render() {
    return (
  <View style={myStyle.container}>
      <Text>我在这里</Text>
      <View style={myStyle.innerViewStyle}>
        <Text>我是里面的View</Text>
      </View>
       <View style={myStyle.nextViewStyle}>
      <Text>我是最下面的View</Text>
    </View>

  </View>

);
  }
}

在render()函数的最外一层如果再加一层view会报错，就像iOS中的rootViewController，一个Controller只能有一个rootView。
我们再看下，RN的render()函数中的根<View>是怎么跟iOS关联的？

index.ios.js

这行代码的意思是在'Demo'的项目中，导出组件Demo(() => Demo)，而组件Demo就是我们一开始写的那段代码

export default class Demo extends Component

然后在苹果项目中的AppDelegate.m文件，我们可以看到如下代码

AppDelegate.m

这个rootView就是我们组件Demo里的根<View>！这样就关联上了。当然因为需要RN又在中间封装了很多层view，我们用Xcode分层功能可以看得出来,如下图：

image.png

的实际结构是：

分层.png