React Native项目目录结构以及常用命令

Posted on | Visitors:

RN常用框架组合、目录结构以及常用命令。

RN常用框架

  • redux

    1
    npm install redux --save

  • react-redux

    1
    npm install react-redux --save

  • redux-thunk

    1
    npm install redux-thunk --save

RN目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.
├── __tests__
│   ├── index.android.js
│   └── index.ios.js
├── android
├── ios
├── app
│   ├── com
│   │   ├── com-A
│   │   │   ├── component.js
│   │   │   └── index.js
│   │   └── com-B.js
|   ├── action
│   │   ├── aaction.js
│   │   └── index.js
|   ├── reducer
│   │   ├── areducer.js
│   │   └── index.js
|   ├── constant
│   │   └── index.js
│   ├── assets
│   ├── page
│   │   ├── page-A
│   │   │   └── index.js
│   │   ├── page-B
│   │   │   └── index.js
│   │   └── index.js
│   ├── utils
│   ├── sdk
│   ├── app.js
│   ├── store.js
│   └── index.js
├── index.android.js
├── index.ios.js
├── index.js
├── .babelrc
├── .eslintrc
├── .eslintignore
├── .npmignore
├── .gitignore
└── package.json

RN目录结构分析

  • __tests__：测试代码目录
  • android：Android源码目录
  • ios：iOS源码目录
  • app：RN源码
    • com：公共组件目录
    • action：所有Redux Action目录
    • reducer：所有Redux Reducer目录
    • constant：常量目录
    • assets：资源目录（图片）
    • page：页面目录
    • utils：工具方法目录
    • sdk：SDK引用目录
    • app.js：全局方法／配置
    • store.js：全局state树初始化
    • index.js：入口文件
  • index.android.js：Android入口文件
  • index.ios.js：iOS入口文件
  • index.js：合并的入口文件，指向app.index.js
  • package.json：npm配置文件

常用名

  • 安装配置文件的依赖

    1
    npm install

  • 链接原生库

    1
    react-native link

  • 运行调试

    1
    2
    3
    4
    // 运行android
    react-native run-android
    // 运行iOS
    react-native run-ios

  • 单独打出bundle离线包

    1
    2
    3
    4
    // 打出ios bundle离线包
    react-native bundle --platform ios --dev false --entry-file index.ios.js --bundle-output index.ios.bundle --assets-dest ./
    // 打出android bundle离线包
    react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output index.android.bundle --assets-dest ./

  • Android建立一个从设备向电脑转发的端口

    1
    adb reverse tcp:8081 tcp:8081