RN之项目结构分析

项目结构

init 的一个项目结构如图：

 

• tests：测试文件夹，执行命令 “npm test”会调用此文件夹，在文件夹中需要引入待测试文件。

• android：Android的原生开发目录，可以用Android Studio打开进行原生开发。

• ios: Ios的原生开发目录，可以用Xcode打开进行原生开发。

• node_modules: 存放所有的项目依赖库，配置package.json之后执行“npm install”后自动创建的文件夹。

• .babelrc: Babel的配置文件,Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。babelrc用来设置转码规则和插件。

• .buckconfig: buck的配置文件，buck是Facebook推出的一款高效率的App项目构建工具。

• .flowconfig: Flow 是 Facebook 旗下一个为 JavaScript 进行静态类型检测的检测工具。它可以在 JavaScript 的项目中用来捕获常见的 bugs，比如隐式类型转换，空引用等等。

• .gitattributes: git属性文件设定一些项目特殊的属性。比如要比较word文档的不同；对strings程序进行注册；合并冲突的时候不想合并某些文件等等。

• .gitignore: 用来配置git提交需要忽略的文件。

• .watchmanconfig: 用于监控bug文件和文件变化，并且可以出发指定的操作。

• app.json: 配置了name和displayName，不过没发现在哪里使用到了。（待研究。。）

• index.android.js 和 index.ios.js: Android 和 Ios 入口文件，可以在android的MainApplication中的ReactNativeHost中重写getJSMainModuleName()方法更改; 在Ios的AppDelegate.m文件的didFinishLaunchingWithOptions方法中通过jsBundleURLForBundleRoot可以更改入口文件。

• package.json: package.json定义了项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

• yarn.lock: Yarn 是 一个由 Facebook 创建的新 JavaScript 包管理器；每次添加依赖或者更新包版本，yarn都会把相关版本信息写入yarn.lock文件。这样可以解决同一个项目在不同机器上环境不一致的问题。

• Android文件表

  名称	功能描述
  app/build	app模块build编译输出目录
  app/build.gradle	app模块的gradle编译文件
  app/app.iml	app模块的配置文件
  app/proguard-rules.pro	app模块的proguard文件
  build.gradle	项目的gradle编译文件
  setting.gradle	项目中的配置文件
  gradlew	脚本文件，可在命令行执行打包
  local.properties	本地配置信息，如sdk,ndk配置
  External Libraries	项目依赖的Lib，编译时自动下载

• index.android.js作为Recott Ncotive项目Android端的启动入口，Android的入口在MainActivity文件中，核心方法在getMainComponentName()中：

• prtected String getMainComponentName():{
      return "Shop";
  }

  ├── components    //组成应用的各个组件
  │   ├── Routers.android.js     //每个组件若实现不一样，分为android的实现和ios的实现。
  │   ├── Routers.ios.js
  │   ├── common     //公共组件
  │   ├── issues        //议题页面
  │   ├── navigation  //导航组件，android用侧边栏，ios准备用tab
  │   └── project      //项目页面
  └── network    //网络服务
      └── DataService.js
  

  　　

  • index.ios.js 文件分析

    　

     1 index.ios.js 文件分析
     2 
     3 /**
     4  * Sample React Native App
     5  * https://github.com/facebook/react-native
     6  * @flow
     7  * 定义了一个名为HelloWorldApp的新的组件（Component），并且使用了名为AppRegistry的内置模块进行了“注册”操作
     8  * 组件本身结构可以非常简单——唯一必须的就是在render方法中返回一些用于渲染结构的JSX语句。
     9  */
    10 
    11 /* "use strict" --- 严格模式
    12 * - 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
    13   - 消除代码运行的一些不安全之处，保证代码运行的安全；
    14   - 提高编译器效率，增加运行速度；
    15   - 为未来新版本的Javascript做好铺垫。
    16   参考: http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html
    17 * */
    18 "use strict"
    19 
    20 import React, { Component } from 'react';
    21 import {
    22   AppRegistry, // 注册组件,是应用的JS运行入口
    23   StyleSheet,  // 样式表, 类似于一个集合包含各个组件的属性
    24   Text,        // 文本组件(类似于IOS的UILabel)
    25   View         // 视图组件
    26 } from 'react-native';
    27 
    28 // 声明一个 Helloworld 组件
    29 class HelloWorld extends Component {
    30   render() { // 渲染
    31     return (
    32         // 根视图 , 然后根视图上加载一个Text组件用来显示 文本
    33         <View style={styles.container}>
    34           <Text style={styles.welcome}>
    35             根视图上加载Text组件并显示一个段文字:Hello
    36           </Text>
    37           <Text style={styles.welcome}>
    38             副标题
    39           </Text>
    40         </View>
    41     );
    42   }
    43 }
    44 
    45 const styles = StyleSheet.create({
    46   container: { // 根视图的相关属性设置,名字任意, 前后呼应为宜。以下设置参考:http://www.myexception.cn/flex/2040674.html
    47     flex: 1, // 当一个元素定义了flex属性时，表示该元素是可伸缩的（flex的属性值大于0的时候才可伸缩）。
    48     justifyContent: 'flex-start', // flex-start、flex-end、center、space-between、space-around
    49     alignItems: 'flex-start',     // flex-start、flex-end、center、space-between、space-around
    50     // backgroundColor: '#F5FCFF',
    51     backgroundColor: 'white',
    52 
    53   },
    54   welcome: {
    55     backgroundColor: 'black', // 背景颜色
    56     // padding: 10, // 内边距(文字距离Text组件的边距)
    57     marginLeft: 10, // x 坐标 (外边距-距离左边)   ------ 与根视图的两个属性关联justifyContent & alignItems
    58     marginRight: 0,
    59     marginTop:  50, // y 坐标 (外边距-距离上边)  ------ 与根视图的两个属性关联justifyContent & alignItems
    60     // fontFamily:'', // 字体名称(楷体、方正等)
    61     // fontStyle: '', // 字体样式(粗体、斜体等)
    62     fontSize: 20,  // 字体大小
    63     textAlign: 'left', // 字体排版 (auto、left、right、center、justify)
    64     color:'red', // 字体颜色
    65     // borderStyle: 'dashed',// 边框样式 (solid-固体/立方体、dotted-布满的/打点的、dashed-虚线)
    66     // borderColor:'red', //边框颜色
    67     // borderRadius: 9, // 边框圆角
    68     // shadowColor: "red", // Text组件的影子颜色
    69     // shadowOffset: 10,   // Text组件的影子倾斜度
    70     // textShadowColor: "red", // 内容文本影子颜色
    71     // tintColor: 'red', // 前置颜色(一般用不到)
    72     // height: 85, // Text组件高度
    73     // width: 350, // Text组件宽度
    74     // maxHeight: 80, // Text组件最大高度,自适应宽度情况下用到
    75     // maxWidth: 80,  // Text组件最大宽度,自适应高度情况下用到
    76     // margin: 10,    // 距离四周都是 10
    77   },
    78   subTitle:{
    79     backgroundColor: 'gray', // 背景颜色
    80     marginLeft: 20, // x 坐标 (外边距-距离左边)   ------ 与根视图的两个属性关联justifyContent & alignItems
    81     marginTop:  100, // y 坐标 (外边距-距离上边)  ------ 与根视图的两个属性关联justifyContent & alignItems
    82     fontSize: 20,  // 字体大小
    83     textAlign: 'left', // 字体排版 (auto、left、right、center、justify)
    84     color:'red', // 字体颜色
    85   },
    86   instructions: {
    87     textAlign: 'center',
    88     color: '#333333',
    89     marginBottom: 5,
    90   },
    91 });
    92 
    93 /*
    94 * AppRegistry模块则是用来告知React Native哪一个组件被注册为整个应用的根容器。
    95 * 一般在整个应用里AppRegistry.registerComponent这个方法只会调用一次
    96 */
    97 AppRegistry.registerComponent('HelloWorld', () => HelloWorld);