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()中:
-
1 prtected String getMainComponentName():{ 2 return "Shop"; 3 }
├── 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);
-