React Native移动开发实战
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.2 React Native项目结构剖析

在React Native项目中，由于项目同时支持Android和iOS，所以我们会看到完整的Android和iOS项目结构。我们可以通过Android Studio和Xcode来打开相应的项目，在混合开发的时候，往往需要对原生的代码进行编辑，这时候，打开Android Studio和Xcode编写差异化代码即可。

2.2.1 React Native文件结构

当新建一个React Native项目后，使用IDE打开后看到的项目目录结构如图2-19所示。

图2-19 React Native项目结构

React Native项目文件组成及相关说明见表2-1。

表2-1 React Native文件表

其中index.android.js和index.iOS.js文件分别为Android和iOS的启动入口文件。React Native项目中所依赖的第三方库则被统一放在node_modules文件夹下，由package.json进行统一管理。

2.2.2 iOS文件结构及代码分析

React Native项目中，同时包含Android和iOS, iOS的项目结构和原生的项目结构一致，其项目结构如图2-20所示。

图2-20 iOS项目结构

React Native文件iOS目录如表2-2所示。

表2-2 iOS文件表

或许，读者会有疑问，在index.ios.js注册启动文件后，iOS是如何启动原生视图的呢？答案在APPDelegate.m文件中。打开APPDelegate.m，在APPDelegate.m中声明的根视图中有如下代码：

        RCTRootView *rootView = [[RCTRootView alloc]
        initWithBundleURL:JSCodeLocation
        moduleName:@"Shop"
        initialProperties:nil
        launchOptions:launchOptions];

React Native库将其所有的类名使用RCT作为前缀，也就是说RCTRootView其实是React Native的类。而在iOS中，RCTRootView表示React Native的根目录。APPDelegate.m通过将视图添加到UIViewCotroller中并渲染到屏幕上。例如，在本示例项目中，打开index.ios. js，在最后一行看到代码中暴露Shop组件，从而完成渲染工作。相关代码如下：

        APPRegistry.registerComponent（'Shop',（）=> Shop）;

2.2.3 Android文件结构及代码分析

在React Native中，Android的项目结构和原生应用项目结构是一致的，其项目目录结构如图2-21所示。

图2-21 Android项目结构

Android项目文件及说明如表2-3所示。

表2-3 Android文件表

index.android.js作为Recott Ncotive项目Andrad端的启动入口，是如何启动原生视图的呢？正如APPDelegate.m之于iOS, Android的入口在MainActivity文件中，其核心的方法在getMainComponentName()中：

        protected String getMainComponentName（）{
            return "Shop";
        }

除了上面介绍的文件外，React Native项目中所依赖的包都会统一放在node_modules文件夹下。关于使用React Native进行混合开发过程中的一些细节，后面章节将慢慢介绍。

上一章目录下一章