React Native Query Boilerplate 使用教程

React Native Query Boilerplate 使用教程

react-native-query-boilerplateReact Native App Boilerplate using React Query, Zustand (un-opinionated small, fast and scalable solution)项目地址:https://gitcode.com/gh_mirrors/re/react-native-query-boilerplate

1. 项目的目录结构及介绍

react-native-query-boilerplate/
├── src/
│   ├── assets/
│   ├── components/
│   ├── config/
│   ├── hooks/
│   ├── navigation/
│   ├── screens/
│   ├── state/
│   ├── utils/
│   └── index.js
├── App.js
├── index.js
├── package.json
└── README.md

目录结构介绍

• assets: 存放静态资源，如图片、字体等。
• components: 存放可复用的React组件。
• config: 存放项目配置文件，如API配置、环境变量等。
• hooks: 存放自定义React Hooks。
• navigation: 存放导航相关的配置和组件。
• screens: 存放应用的各个页面组件。
• state: 存放状态管理相关的文件，如Zustand的store定义。
• utils: 存放工具函数和辅助类。
• index.js: 项目的入口文件。
• App.js: 应用的主组件。
• package.json: 项目的依赖和脚本配置文件。
• README.md: 项目的说明文档。

2. 项目的启动文件介绍

index.js

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

• AppRegistry.registerComponent: 注册应用的主组件，appName 是从 app.json 中读取的应用名称。

App.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { QueryClient, QueryClientProvider } from 'react-query';
import { Provider as ZustandProvider } from 'zustand';
import RootNavigator from './src/navigation/RootNavigator';
import store from './src/state/store';

const queryClient = new QueryClient();

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <ZustandProvider store={store}>
        <NavigationContainer>
          <RootNavigator />
        </NavigationContainer>
      </ZustandProvider>
    </QueryClientProvider>
  );
};

export default App;

• QueryClientProvider: 提供React Query的上下文。
• ZustandProvider: 提供Zustand状态管理的上下文。
• NavigationContainer: 提供React Navigation的上下文。
• RootNavigator: 应用的根导航组件。

3. 项目的配置文件介绍

package.json

{
  "name": "react-native-query-boilerplate",
  "version": "1.0.0",
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "17.0.2",
    "react-native": "0.66.0",
    "react-query": "^3.34.7",
    "zustand": "^3.6.7",
    "react-navigation": "^6.0.0"
  },
  "devDependencies": {
    "eslint": "^7.32.0",
    "jest": "^27.2.4",
    "react-native-testing-library": "^7.0.2"
  }
}

• scripts: 定义了项目的运行脚本，如启动Android、iOS应用等。
• dependencies: 项目的生产依赖。
• devDependencies: 项目的开发依赖。

config/api.js

export const API_URL = 'https://api.example.com';

• API_URL: 定义了API的基础URL，用于配置API请求。

通过以上介绍，您可以更好地理解和使用 react-native-query-boilerplate 项目。希望这篇教程对您有所帮助！

react-native-query-boilerplateReact Native App Boilerplate using React Query, Zustand (un-opinionated small, fast and scalable solution)项目地址:https://gitcode.com/gh_mirrors/re/react-native-query-boilerplate