React Native 项目结构、剖析index.ios.js文件

React Native 项目结构、剖析index.ios.js文件

初始化项目中目录结构如上图，有用的就是红框里面标注的部分

1. android是编译出来的Android工程，目录下面有build.gradle,可以导入为Android Studio工程;
2. ios 为iOS项目，双击里面的工程名.xcodeproj 直接Xcode启动;
3. 上面两个目录可以说是Native项目壳子，那么index.android.js和index.ios.js就可以看成是rn项目的ios和Android入口，通常情况下他俩是相同的内容，入门项目中就是在这两个文件中进行页面的开发。
4. package.json这个就关键了，从内容上就可以看出他的功能应该是类似于Android项目中的build.gradle，说明了整个Rn项目的名称，版本号，以及需要的依赖等等。后面引入第三方组件其中一步，就是要在这些依赖中添加条目。

上面有个目录node_modules，这个目录是node通过解析package.json 下载的相关依赖。为啥说它没用呢，就是说我们在拷贝别人的项目的时候这个是个完全不需要拷贝的目录，我们只需要对好package.json，然后通过npm install命令，就可以重新生成对应的node_modules目录。

备注：其中node_modules和 package.json都是NodeJS相关的目录

而且node有模块化的思想（Rn有组件化的思想），我们写的页面JS需要操作文件， 引入我们的组件和格式各样的配置，不是像前端的引入方式，而是通过在首行import进来。

而且也可以看到，我们在开发的过程中一直在不断的使用node的npm包管理，去下载各种第三方依赖；所以，现在可以理解为什么Rn开发会需要node的环境了么？

index.ios.js剖析

首先把React引入进来，然后从’react’中把{ Component }（组建/模块）引入进来；

从’react-native’中把{ AppRegistry, StyleSheet, Text, View }引入进来；以后要引用什么就在这里添加什么；
比如我将来要用到图像和输入框，那么我们就可以从’react-native’导入Image, TextInput。

• 类分析：
  

• 面向组件开发（就是RN里面的任何一个类都可以通过注册产生一个组件）；

• 上面的代码的意思是：

  1. 从Component继承下来创建一个类名为AwesomeProject类（js类的一种写法—es6的写法);

  2. 也就意味着我们上面那个类最终会生成一个组件，插入到我们的页面中，所以说只要是一个类都能够生成一个组件

     • 上面代码中：

  3. render()是AwesomeProject类里面的一个方法/函数（这个方法可以理解成我们OC中的viewdidload:()方法），到后期再讲它的生命周期！

  4. render()方法是用来通过return返回具体的组件内容的；
  5. 我们一般都是在render()方法里面的return中编写界面的内容和结构；

  注意：
  如果要添加多个View，应该是写在最外层的View里面，也就是最外层只有一个View，其他写在它里面；

• 样式

  1. 所有的组件都有一个style属性来设置样式；

  2. 下面的代码意思是，定义一个样式变量styles，而下面的container是这个名字对应下的样式是这样子的，组件中调用了这个样式就会按照里面定义的样式来显示：{styles.container}
     

  3. 样式不多的时候，也可以直接写在style属性后面用{ }包括起来：
     

• AppRegistry
  

AppRegistry模块则是用来告知React Native哪一个组件被注册为整个应用的根容器。一般在整个应用里AppRegistry.registerComponent这个方法只会调用一次。上面的代码里已经包含了具体的用法，你只需将index.ios.js或是index.android.js文件中return()中的代码修改为你喜欢的代码运行即可。

个人博客传送门