ReactNative进阶（三十五）：应用脚手架 Yo 构建 RN 页面

爱被打了一巴掌 2022-10-15 01:53 133阅读 0赞

### 文章目录 ###

*   *  一、前言
     *  二、Bloc数据流讲解
     *  三、利用代码自动生成功能创建新页面
     *  四、Bloc数据流使用说明
     *  五、拓展阅读

--------------------

## 一、前言 ##

前期将脚手架`yo`安装成功，本篇博文主要讲解如何利用`yo`提供的代码自动生成功能生成项目代码。

## 二、Bloc数据流讲解 ##

Bloc数据流工具安装：

sudo npm install -g yo
    sudo npm install -g generator-bloc

安装完成后通过执行 `npm ls generator-bloc -g` 命令，查看bloc模板生成位置。执行结果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70_pic_center]

进入`node_modules`目录，可看到生成的`generator-bloc`文件夹，进入该文件夹，查看`README.md`文件。

文件内容如下：

> # generator-bloc [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency
    > Status][daviddm-image]][daviddm-url] [![Coverage
    > percentage][coveralls-image]][coveralls-url]
    > > react-bloc cli
    > 
    > ## Installation
    > 
    > First, install [Yeoman](http://yeoman.io) and generator-bloc using
    > [npm](https://www.npmjs.com/) (we assume you have pre-installed
    > [node.js](https://nodejs.org/)).
    > 
    > ```bash npm install -g yo npm install -g generator-bloc ```
    > 
    > Then generate your new project:
    > 
    > ```bash yo bloc ```
    > 
    > ## Getting To Know Yeoman
    > 
    >  * Yeoman has a heart of gold.  
    >  * Yeoman is a person with feelings and opinions, but is very easy to work with.  
    >  * Yeoman can be too opinionated at times but is easily convinced not to be.  
    >  * Feel free to [learn more about Yeoman](http://yeoman.io/).
    > 
    > ## License
    > 
    > MIT © [MeePwn](https://github.com/maybewaityou)
    > 
    > 
    > [npm-image]: https://badge.fury.io/js/generator-bloc.svg [npm-url]:
    > https://npmjs.org/package/generator-bloc [travis-image]:
    > https://travis-ci.org/maybewaityou/generator-bloc.svg?branch=master
    > [travis-url]: https://travis-ci.org/maybewaityou/generator-bloc
    > [daviddm-image]:
    > https://david-dm.org/maybewaityou/generator-bloc.svg?theme=shields.io
    > [daviddm-url]: https://david-dm.org/maybewaityou/generator-bloc
    > [coveralls-image]:
    > https://coveralls.io/repos/maybewaityou/generator-bloc/badge.svg
    > [coveralls-url]: https://coveralls.io/r/maybewaityou/generator-bloc

## 三、利用代码自动生成功能创建新页面 ##

此处以新建test界面为例介绍使用bloc创建界面的方法步骤，页面新建在项目中page-new目录下。

1.  进入项目根目录输入命令：`yo bloc` 回车；
2.  弹出选择界面后使用上下移动键选择： `create a new page`. 回车；
3.  输入页面名字：test 回车；
4.  选择语言：`js` 回车；
5.  输入模块路径：`src/page-new` 回车；
6.  选择新建页面所在的模块：`home` 回车；
7.  选择平台：`react-native` 回车；
8.  待页面创建完成，未报错则说明页面创建成功；  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70]

通过以上步骤信息结合项目结构可知，

*  脚手架yo为我们新生成了`home/view/TestView.js、 home/bloc/TestBloc.js、home/bloc/interactor/TestUserCase.js、home/bloc/data/source/TestRepository.js、home/bloc/data/source/local/TestLocalDataSource.js、home/bloc/data/source/remote/TestRemoteDataSource.js`等文件。
 *  在`home/bloc/ioc/types.js`文件中新增bloc标识：

export const DATA_SOURCE_TYPES = { 
      HomeRemoteDataSource: Symbol.for('HomeRemoteDataSource'),
      HomeLocalDataSource: Symbol.for('HomeLocalDataSource'),
    
    	TestRemoteDataSource: Symbol.for('TestRemoteDataSource'),
    	TestLocalDataSource: Symbol.for('TestLocalDataSource'),
    };

export const USE_CASE_TYPES = { 
      HomeUseCase: Symbol.for('HomeUseCase'),
    	TestUseCase: Symbol.for('TestUseCase'),
    };

export const REPOSITORY_TYPES = { 
      HomeRepository: Symbol.for('HomeRepository'),
    	TestRepository: Symbol.for('TestRepository'),
    };

export const BLOC_TYPES = { 
      HomeBloc: Symbol.for('HomeBloc'),
    	TestBloc: Symbol.for('TestBloc'),
    };

*  在`bloc/ioc/register.js`文件中新增容器配置：

import TestBloc from '../TestBloc';
    import TestUseCase from '../interactor/TestUseCase';
    import TestRepository from '../data/source/TestRepository';
    import {  TestRemoteDataSource } from '../data/source/remote/TestRemoteDataSource';
    import {  TestLocalDataSource } from '../data/source/local/TestLocalDataSource';
    
    container.bind(DATA_SOURCE_TYPES.TestRemoteDataSource).to(TestRemoteDataSource);
    container.bind(DATA_SOURCE_TYPES.TestLocalDataSource).to(TestLocalDataSource);
    container.bind(REPOSITORY_TYPES.TestRepository).to(TestRepository);
    container.bind(USE_CASE_TYPES.TestUseCase).to(TestUseCase);
    container.bind(BLOC_TYPES.TestBloc).to(TestBloc);

*  在`home/route-config/HomeRouteConfig.js`将新建页面添加到路由中；

将TestView添加到`export`中即可使用`router.navigate(“TestView”)`跳转到该页面。

注：本项目路由使用router：`import { router } from 'mario-navigation-extension';`

## 四、Bloc数据流使用说明 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70_pic_center 1]

`bloc`数据流采用`stream-builder`的形式绑定数据，当`stream`绑定的数据有改变时，`builder`便会重新渲染界面，类似于`RN`的`setState`，下面以刚创建的TestView为例介绍使用步骤：

1.  首先，该页面的入口文件为`src/page-new/view/TestView.js`, 该界面只写view相关的代码，`export default ( ) ...` 方法即为页面入口，该方法可接收路由传递的参数，可在此方法完成参数初始化，如果该页面需要在未被销毁的情形下多次加载，可以使用`try catch` 初始化，`container.get(BLOC_TYPES.TestBloc)`方法会完成`bloc`的唯一注册，只会在第一次初始化时渲染界面，重新渲染需要使用`BlocProvider.of(BLOC_TYPES.TestBloc)`，因此多次加载同一界面可以使用如下代码：

export default (props) => { 
      let _bloc = null;
      try { 
        _bloc = BlocProvider.of(BLOC_TYPES.TestBloc);
      } catch (error) { 
        _bloc = container.get(BLOC_TYPES.TestBloc);
      }
      const params = props.navigation.state.params;
      _bloc.init(params);
      return <BlocProvider bloc={ _bloc} child={ _viewBuilder} />;
    };

其中init方法在TestBloc中定义。

1.  接下来便是`_viewBuilder`中的界面UI：

function _viewBuilder() { 
      const _bloc = BlocProvider.of(BLOC_TYPES.TestBloc);
      return (
        <View style={ style.container}>
          <StreamBuilder stream={ _bloc.viewState$} builder={ _testBuilder} />
          <StreamBuilder stream={ _bloc.listData$} builder={ _listBuilder} />
        </View>
      );
    }

其中`stream`为TestBloc中定义的数据，`builder`为界面UI，`builder`会获取绑定数据的快照`snapshot`，`snapshot.data`即为绑定的数据。

function _testBuilder(snapshot){ 
      if(snapshot.hasData){ 
        return (
        <Text>{ JSON.stringify(snapshot.data)}</Text>
        )
      } else 
      return (
        <View></View>
      )
    }

`stream`可以绑定多个数据流：

1.  页面数据定义在 `src/page-new/home/bloc/TestBloc.js`中，

listData = { 
        viewState: { 
          isRefresh: false,
          isLoading: true,
          hasMore: true,
          hint: '加载中...',
          pageNo: '1',
          pageSize: '15',
        },
        list: [],
        data: { },
      };
      listData$ = new EnhanceSubject(this.listData);
    
      viewState = { 
        open: false,
        pickerItems: [{  text: '待发货', handleFlag: '1' }, {  text: '已发货', handleFlag: '2' }],
        pickedItem: { 
          text: '待发货',
          handleFlag: '1',
        },
        totalSize: 0,
      };
      viewState$ = new EnhanceSubject(this.viewState);

`listData$`即为TestView中绑定的数据，当`listData$`改变时界面就会重新渲染，例如：

init = (params) => { 
        this.listData= processModify(this.listData, { 
          viewState: { 
            isRefresh: params.isRefresh,
            isLoading: params.isLoading,
            hint: '加载中...'
          },	
        });
        this.listData$.add(this.listData); // 相当于RN的setState
      };

> ！注：定义在TestBloc中的方法建议使用**箭头函数**，防止`this`指向跑偏。

1.  网络请求使用封装好的WebService： `src/main/service/WebService.js`，WebService的BaseUrl为：`src/main/constant/Constant.js`：`BASE_URL`，请求参数有个`meta`数据，该`meta`数据会在真正请求前删除，使用`meta: { silence: true }`可以在请求时不展示Loading框，默认会加载`Loading`框。

在`bloc`中定义异步接口方法，

queryList = async (refresh, handleFlag) => { 
        let index = refresh ? '1' : this.listData.viewState.pageNo;
        this.listData = processModify(this.listData, { 
          viewState: { 
            ...this.listData.viewState,
            isRefresh: refresh,
            isLoading: !refresh,
            hint: '加载中...'
          },
        });
        this.listData$.add(this.listData); // 发起请求时刷新界面状态
    	// 使用userCase调用接口，返回的是两个对象，第一个为接口报错（非业务逻辑错）时的对象，第二个为接口正常返回的对象
        const [error, data] = await this.useCase.execute({ 
          bizline: '4',
          tasktyp: '25',
          handleFlag: handleFlag || this.viewState.pickedItem.handleFlag,
          pageNo: index,
          pageSize: this.listData.viewState.pageSize,
          meta: {  silence: true },
        });
        if (error) { 
          ...
          this.listData$.add(this.listData); // 接口报错时更新界面UI
          return;
        }
        let hasList = this.listData.list || [];
        if (refresh) { 
          hasList = [];
        }
        let list = data.resultList;
        let isMore = list.length >= parseInt(this.listData.viewState.pageSize);
        let hint = '';
        if (hasList.length < 1 && list.length < 1) { 
          hint = '抱歉~没有相关信息';
        }
        this.listData = processModify(this.listData, { 
          list: hasList.concat(list),
          data,
          viewState: { 
            ...this.listData.viewState,
            isRefresh: false,
            isLoading: false,
            hasMore: isMore,
            pageNo: `${ parseInt(index) + 1}`,
            hint: hint || (isMore ? '加载更多' : '没有更多了'),
          }
        });
        this.listData$.add(this.listData); // 请求得到后台数据后刷新界面数据
        this.viewState = processModify(this.viewState, { 
          totalSize: data.totalSize,
        });
        this.viewState$.add(this.viewState); // 刷新界面状态
      };

添加：

buildUseCasePromise(params) { 
        return this.repository.queryList(params);
    }

添加接口参数，也就是`this.useCase.execute`传过来的参数，userCase的`excute`方法执行的是`buildUseCasePromise`方法，如果是其它方法需要自定义：

handleCheck(params) { 
        return to(this.repository.handleCheck(params));
      }

此时需要将结果用`to`包裹，以规范返回数据的格式：

import {  to } from '../../../../main/utilities';

调用自定义方法时，需要将bloc里的调用方法由`this.useCase.execute({})`改为`this.useCase.handleCheck({})`;

然后定义数据流策略，使用远程服务器数据还是本地数据库数据（定义在`src/page-new/home/bloc/data/source/TestRepository.js`：）:

queryList(params) { 
        return this.remoteDataSource.queryList(params);
    }

在该处可以进行数据的并行或者串行请求或者数据的其它一些处理：

async queryList(params) { 
        const data = await this.remoteDataSource.queryList({  meta: {  silence: true } });
        if (data.list.length > 0) { 
          let customeridStr = '';
          data.list.forEach((item) => { 
            customeridStr += item.customerid + ',';
          });
    	  // 串行接口
          const signalData = await this.remoteDataSource.queryNewsTheme(
            {  customeridStr, flag: 'index', ...params, meta: {  silence: true } });
          let listIndex = []
          for (let i = 0; i < signalData.listIndex.length; i++) { 
    		...
          }
          return {  totalSize: signalData.totalSize, listIndex };
        } else { 
          return {  'listIndex': [] }
        }
      }

最后就是调用webService请求后台接口：

queryList(params) { 
        return this.webService.request(queryTaskPageList, params);
     }

其中params是传过来的，queryTaskPageList为接口名称，需要自定义：

const queryTaskPageList = 'queryTaskPageList';

数据流如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70 1]

## 五、拓展阅读 ##

*  《[ReactNative进阶（三十二）：前端构建工具–Yeoman][ReactNative_Yeoman]》
 *  《[ReactNative进阶（三十一）： IoC 框架 InversifyJS解读][ReactNative_ IoC _ InversifyJS]》
 *  《[ReactNative进阶（二十九）：BloC模式][ReactNative_BloC]》

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221014/90a11c3fb3c041ad8049b2bc82a317d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70]: /images/20221014/8d85ef68e04a43fa85465749da40eaff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221014/2f854ae39793406da52cd00074a9e01e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70 1]: /images/20221014/d89705d3e47b49f6b77c50864832adc3.png
[ReactNative_Yeoman]: https://shq5785.blog.csdn.net/article/details/117121255
[ReactNative_ IoC _ InversifyJS]: https://shq5785.blog.csdn.net/article/details/117108216
[ReactNative_BloC]: https://shq5785.blog.csdn.net/article/details/116977788