react-native(四)应用架构设计

云天河 react-native 架构的开源项目地址 In Github

目录结构

每个目录具体的功能及其用法，请看对应的类文件或者readme.md文件

├─core_logic  // 逻辑目录 --- 负责书写对应的screen视图的逻辑
│  └─test       // 测试目录 
├─core_screen // 视图目录 --- 负责书写对应的screen视图结构的书写，并引入写好的 logic 与 style
│  └─test       // 测试目录 
├─core_style  // 样式目录 --- 负责书写对应的screen的视图的样式
│  └─test       // 测试目录 
├─img         // 图片目录 --- 存放一些本地预先加载的图片
├─ini         // 配置目录 --- 填写配置信息
├─router_list // 路由目录 --- 负责书写screen视图跳转的规则
├─third       // 插件目录 --- 负责第三方组件的功能集成
│  ├─picker     // 图片单张或者批量上传，并且可以完成截图功能
│  ├─qrCode     // 可完成对二维码的扫描、解析
│  ├─wechat     // 微信登录、分享、支付功能集成
│  └─wifi       // 配置 wifi、获取当前wifi的SSID、获取wifi列表...
├─tools       // 工具目录 --- 比其他目录先加载
│  ├─helper     // 通用函数库
│  ├─http       // 网络相关封装
│  ├─log        // 调试相关 --- 打包时，请在 配置目录 关闭日志输出
│  ├─storage    // 异步存储
│  └─toast      // 消息提示层
└─__auto      // 自动化生成对应 core_logic、core_screen、core_style 的脚本

android/app/src/main/AndroidManifest.xml 权限如下

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- React Native Camera -->
    <uses-permission android:name="android.permission.RECORD_AUDIO"/>
    <uses-permission android:name="android.permission.RECORD_VIDEO"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <!-- Esptouch  -->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
    <uses-permission android:name="android.permission.CHANGE_WIFI_MULTICAST_STATE" />

    <application>

      <!-- Wechat 登录、支付 -->
      <activity android:name=".wxapi.WXEntryActivity" android:label="@string/app_name" android:exported="true"/>
      <activity android:name=".wxapi.WXPayEntryActivity" android:label="@string/app_name" android:exported="true"/>

    </application>

</manifest>

程序入口

因为 react-native 跨平台，不同平台，代码几乎都可以重用，所以真正的入口文件是index.js

示例：安卓入口，IOS 设备同理

./index.js

import './js'; // 程序入口

后文的所有js文件相对路径，都是相对于 js [项目目录]

./js/index.js

import './ini'; // 读取全局配置
import './tools';
import './router_list/__index'; // 路由入口 --- 生产环境
// import './router_list/__test';  // 路由入口 --- 测试环境

全局配置

./ini/base.js

import {
  Dimensions,
  PixelRatio,
  Platform,
}
from 'react-native';

/**
* 注意：生成release时,
* 请设置 app_debug 为 false
* 请设置 router_host 为生成环境地址
* 请设置 版本号
*/

// 配置全局环境变量

global.env = {


  //++++++++++++++++++++++++++++++++++++++++++++++++++++++
  //                  APP基础配置
  //++++++++++++++++++++++++++++++++++++++++++++++++++++++
  app_debug: true, // 如果生成release版，请设置为 false
  app_version: "0.0.2", //　当前版本号
  app_download_prefix: "",　//　CDN下载前缀，安卓端直接下载
  // 平台判断
  is_ios: Platform.OS === 'ios' ? true : false,

  //++++++++++++++++++++++++++++++++++++++++++++++++++++++
  //                  网络请求 - HTTP
  //++++++++++++++++++++++++++++++++++++++++++++++++++++++
  // 路由域名配置
  router_host: 'http://192.168.56.1/', // 域名 - 本地以太网 虚拟网卡
  // router_host: 'http://iotapp.hlzblog.top/', // 域名 - 生产环境


  //++++++++++++++++++++++++++++++++++++++++++++++++++++++
  //                  屏幕设置
  //++++++++++++++++++++++++++++++++++++++++++++++++++++++

  // 百分比布局
  width : Dimensions.get('window').width ,  // 获取屏幕 宽
  height: Dimensions.get('window').height,  // 获取屏幕 高
  // 图片适应屏幕分辨率
  pix: 1 / PixelRatio.get(), // 像素 * 密度比，图片用


  //++++++++++++++++++++++++++++++++++++++++++++++++++++++
  //                  微信、QQ、支付宝
  //++++++++++++++++++++++++++++++++++++++++++++++++++++++
  wechat_appid: '', // 微信登录、分享、支付，需要使用


  //++++++++++++++++++++++++++++++++++++++++++++++++++++++
  //                  工具类
  //++++++++++++++++++++++++++++++++++++++++++++++++++++++

  log_switch : 1,     // 关 -> 0 , 开 -> 1
  log_least_level: 1, // 输出日志，要求的 最低日志等级   等级限制  1 到 4


};

./ini/storage.js

/**
* 这部分是为了初始化全局存取对象，方便操作
*   用作本地缓存 或 存储永久数据
*/
import Storage from 'react-native-storage';
import { AsyncStorage } from 'react-native';

global.storage = new Storage({
  // maximum capacity, default 1000 
  size: 1000,

  // Use AsyncStorage for RN, or window.localStorage for web.
  // If not set, data would be lost after reload.
  storageBackend: AsyncStorage,

  // expire time, default 1 day(1000 * 3600 * 24 milliseconds).
  // can be null, which means never expire.
  // defaultExpires: 1000 * 3600 * 24,
  defaultExpires: null,

  // cache data in the memory. default is true.
  enableCache: true,

  // if data was not found in storage or expired,
  // the corresponding sync method will be invoked and return 
  // the latest data.
  sync : {
    // we'll talk about the details later.
  }
});

/*
示例中会用到的变量，这个表示 key 的名字，注意，尽量用驼峰法命名，！~中间不能有下划线~！！
let token_name = 'testToken';

//++++++++++++++++++++++++++++++++++++++
//            异步存入数据
//++++++++++++++++++++++++++++++++++++++

    storage.save({
      key: token_name, // 注意:请不要在key中使用_下划线符号!
      data: test_data, // JSON数据
      expires: 1000 * 60 // 缓存
    });

//++++++++++++++++++++++++++++++++++++++
//            异步读取数据
//++++++++++++++++++++++++++++++++++++++

  static asyncData(){
    //load 读取
    storage.load({
      key: token_name
    }).then((ret) => {
      // 如果找到数据，则在then方法中返回
      console.log('token_name的值为:');
      console.log(ret);
    }).catch(err => {
      // 如果没有找到数据且没有sync方法，
      // 或者有其他异常，则在catch中返回
      console.warn(err.message);
    })
  }
*/

路由 - 导航栏

简要介绍

官方文档 | 中文文档

不需要头部导航栏文字的部分，可以查看文档自定义 style 隐藏头部

StackNavigator

这是一个栈属性的导航栏，会记录你通过StackNavigator配置的路由
该路由会，如，数据结构中的栈一样，记录你出栈入栈

这个也是，你点击初始界面的 `群助手`

左上角就有一个 返回按钮，这是记录了你刚刚点进来的位置

TabNavigator

这是一个统计动画切换页面的导航栏
会在导航栏上显示你当前的路由是哪个
(当然，你可以不显示导航栏)

这个底部的按钮就是这个的案例
(默认，每次点击后，该层级的页面都会临时渲染出来)

当你路由有嵌效果的时候，比如 TabNavigator 里面嵌套了 StackNavigator

static navigationOptions = {
  title: '消费记录', // 这是 StackNavigator 的标题
  tabBarLabel: '个人', // 这是 TabNavigator 的标题
};  

更多路由技巧

网络请求

react native 用模拟器调试的时候 网络请求，走的是路由【本地测试时，靠的是路由内网端口映射】