3.React Native项目目录结构介绍；

目录

 

1.初始创建目录结构说明

2.编辑React Native中的JS代码

3.编写IOS/Android原生代码

4.如何添加第三方react native npm源码库

4.1仅仅涉及React Native开发

4.2涉及React Native和IOS或者Android混合开发

5.第三方代码添加到libs包中

6.项目实际开发的目录结构

---

1.初始创建目录结构说明

开发项目之前首先了解一下项目的目录结构，方便后期开发；

React Native是建立在Android和IOS的SDK之上的SDK，React Native主要包含三部分：

a.Android的原生工程；

b.ios的原生工程；

c.React Native相关；

HelloWorld
          |-- android
          |-- ios
          |-- node_modules
          |-- package.json
          |-- index.js  

目录结构各分部简单介绍：

android:项目的Android的原生工程；

ios:        项目的IOS的原生工程；

node_modules:这个文件夹主要存放根据package.json文件声明的依赖，通过公网下载下来的第三方react native npm包源代码；（备注：在初始化创建项目时此目录会自动创建并下载第三方react native npm包源代码）

package.json:React Native是基于javasript开发的语言，使用npm做为包管理，这个文件就是npm的包管理的文件，主要配置我们依赖的第三方包；

index.js:这个文件是IOS和Android在相应设备上打包运行的入口文件；（备注：早起React Native项目应该是index.ios.js和index.android.js两个单独的入口文件）

2.编辑React Native中的JS代码

项目编辑之前都需要类似像Java一样做分包的创建，简单说明一下我们正式项目的目录结构

HelloWorld
          |-- android
          |-- ios
          |-- node_modules
          |-- package.json
          |-- index.js  
          |-- img
          |-- public
          |-- scene

我在原有的基础上添加了三个目录分别img,public,scene三个目录；

img：存放界面要显示的png图片；

public：存放工具js，网络请求js的封装，数据存储js等相关操作的js；（备注：可以在public中创建分类目录，public/net、public/net、public/datastorage等）

scene：存放项目的JS组件（界面）；（备注：可以在scene目录下创建不同功能模块的目录，例如scene/draw,scene/user,scene/home等二级三级目录）

3.编写IOS/Android原生代码

React Native实际上不能完全替代IOS或者Android原生的功能，那么就需要我们在android或者ios原生的API实现实现我们的需求；

React Native支持只用ReactNative单独开发，也可以RN、IOS或者Android原生混合开发；

HelloWorld/android:android原生开发；（备注：实际使用参考RN中文网https://reactnative.cn/docs/native-modules-android/）

HelloWorld/ios：IOS原生开发；备注：实际使用参考RN中文网https://reactnative.cn/docs/native-modules-ios/）

scene：React Native开发；

4.如何添加第三方react native npm源码库

4.1仅仅涉及React Native开发

首先打开HelloWorld/package.json文件，找到以后depencencies标签，添加第三方包react-native-modal并指定版本版本，第一种WebStorm会自动提示运行npm install安装第三方包，点击Run 'npm install'即可；第二种当然还可以进入HellWorld目录执行执行npm install <package_name> --save命令安装第三方包，例如npm install react-native-modal --save；

 "dependencies": {
    "react": "16.6.0-alpha.8af6728",
    "react-native": "0.57.4",
    "react-native-modal": "^6.5.0"
  },

执行网npm install命令以后，我们会发现node_modules下多了react-native-modal目录，react-native-modal目录主要存放模态框的源码，下面就可以在代码中引用模态框，如下：

import Modal from "react-native-modal";

4.2涉及React Native和IOS或者Android混合开发

 

例如React Native需要调用百度地图第三方库react-native-baidu-map，添加react-native-baidu-map以后是无法调用百度地图的；

 "dependencies": {
    "react": "16.6.0-alpha.8af6728",
    "react-native": "0.57.4",
    "react-native-modal": "^6.5.0",
    "react-native-baidu-map": "^0.6.0",
  },

我还需要在Android原生工程或者IOS原生工程中进行配置，在AndroidManifest.xml添加定位权限操作需要要在原生工程中添加其他配置参考https://www.npmjs.com/package/react-native-baidu-map第三方地址，每个第三方涉及第三方的配置都会有readme这个一定要看，一般使用 Manual install 配置方式比较保险，automatic install 有可能会漏掉一些配置；

5.第三方代码添加到libs包中

由于加入到node_modules第三方库都是从公网上下载下来的，第三库提供的功能可能不能满足我们的需求，那么我们怎么保证修改的代码换一个环境仍然可以正常使用呢，那么我们就需要HelloWorld目录新建libs目录，libs目录来专门放置这些第三方 react native npm 包的源代码；

例如react-native-baidu-map源代码库我们可以迁移到libs目录；

6.项目实际开发的目录结构

HelloWorld
          |-- android
          |-- ios
          |-- node_modules
          |-- package.json
          |-- index.js  
          |-- img
          |-- public
          |-- scene
          |-- libs

android:Android原生工程目录；

ios:IOS原生工程目录；

package.json:React Native是基于javasript开发的语言，使用npm做为包管理，这个文件就是npm的包管理的文件，主要配置我们依赖的第三方包；

index.js:这个文件是IOS和Android在相应设备上打包运行的入口文件；（备注：早起React Native项目应该是index.ios.js和index.android.js两个单独的入口文件）

img：存放界面要显示的png图片；

public：存放工具js，网络请求js的封装，数据存储js等相关操作的js；（备注：可以在public中创建分类目录，public/net、public/net、public/datastorage等）

scene：存放项目的JS组件（界面）；（备注：可以在scene目录下创建不同功能模块的目录，例如scene/draw,scene/user,scene/home等二级三级目录）

libs:手动进入npm第三方库源码，方便以后修改；

参考：

https://github.com/fushang318/react-native-demo/wiki/react-native-工程目录结构说明

https://reactnative.cn/docs