react native模拟mock接口

Posted GHUIJS

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react native模拟mock接口相关的知识,希望对你有一定的参考价值。

安装fetch-mock(由于react native是使用fetch请求,所有这里需要安装fetch-mock)

yarn add fetch-mock

在新建的mock文件夹中写模拟数据

import mockFetch from 'fetch-mock';

type IIcon = 
  icon: object;
  title: string;
;

const iconsIndex: IIcon[] = [
  
    icon: require('@/assets/images/app/dashboard-contract.png'),
    title: '合同看板',
  ,
  
    icon: require('@/assets/images/app/dashboard-budget.png'),
    title: '预算看板',
  ,
];

mockFetch.mock(/index\\/indexIcons/, 
  code: 200,
  data: iconsIndex,
);

把模拟数据引入到项目入口组件

//App.tsx中
import '@/mock/index';

新建api包,定义接口

import defHttp from '@/utils/http';

enum Api 
  INDEX_ICON = '/index/indexIcons',


export function getIndexIcon() 
  return defHttp.get<any>(Api.INDEX_ICON);

组件中请求数据

import getIndexIcon from '@/api/PageIndex';

// 页面主体
class Index extends Component 
  state = 
    icons: [],
  ;

  componentDidMount() 
    getIndexIcon().then((res: any) => 
      this.setState(icons: res.data);
    );
  

结果

 

以上是关于react native模拟mock接口的主要内容,如果未能解决你的问题,请参考以下文章

react native中所遇到的问题

错误:无效的挂钩调用。钩子只能在函数组件的主体内部调用。 (React-hooks React-native)

react-native 和 yarn 工作区的“钩子只能在函数组件的主体内调用”错误

使用requests_mock断言HTTP请求的主体

React Native 错误:无效的钩子调用。 Hooks 只能在函数组件的主体内部调用

前端 API 接口数据模拟 (Mock)