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

2401_84447065

于 2024-05-16 01:13:15 发布

阅读量806

点赞数 16

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84447065/article/details/138930472

版权

程序员专栏收录该内容

160 篇文章 0 订阅

订阅专栏

❤️ 谢谢支持

喜欢的话别忘了关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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数据流使用说明


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210523095636451.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ==,size_16,color_FFFFFF,t_70#pic_center)


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


首先，该页面的入口文件为`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 ;
};


其中`init`方法在 TestBloc 中定义。


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

function _viewBuilder() {
const _bloc = BlocProvider.of(BLOC_TYPES.TestBloc);
return (

);
}


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

function _testBuilder(snapshot){
if(snapshot.hasData){
return (
{JSON.stringify(snapshot.data)}
)
} else
return (

)
}


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


页面数据定义在 `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`指向跑偏。
> 
> 
> 


网络请求使用封装好的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 $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots 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); // 刷新界面状态
};


在对应的`TestUseCase.js`中添加：

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++) {

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。

(https://img-blog.csdnimg.cn/img_convert/d7f6750332c78eb27cc606540cdce3b4.png)

linux

前端资料汇总

2401_84447065

关注

16
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
ReactNative进阶（三十五）：应用脚手架 Yo 构建 RN 页面_reactnative 脚手架

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总JavaScript性能linux前端资料汇总。
复制链接

扫一扫