React-Native项目工程搭建

架构师老李

墨衍会员 · AI 创作全网分发码龄10年

关注

原创 2024-01-26 15:51:17 2.4k 阅读 AI 写同款· GEO 优化 ›

从零开始搭建React Native完整原生环境（保姆级）欢迎使用 React Native！这篇文档会帮助你搭建基本的 React Native 开发环境。阅读详情

系列文章目录

前言

任何一个项目的搭建，都是考验一个程序员的技术功底，而 React-Native 也不例外。同时，搭建一个 React-Native 的项目工程，其实要比普通的 Web 项目更难一些，因为 React-Native 是一个新的体系，基本它的底层机制和 H5 完全不同，无论是本地存储，还是运行环境，都需要我们熟悉它。

基于 React-Native 的生态，个人在项目开发过程中，也算是积累了一些经验，把一个项目搭建的重点部分，以文章的形式，呈现出来。

一、项目工程通用功能

React-Native项目，目标是打造移动应用的框架，笔者认为，一个App的实现，至少要包含这么几块内容。

1、语法框架，类似web端的 react、vue 等等。React-Native依然遵循 react 的语法。

2、页面路由，类似web端的router，不同框架之间，有不同的路由控制能力。

3、UI框架，方便实现页面基本功能的组件库。

有了这几样东西，我们就能进行基本的编码工作。基本上，所有的前端项目，都离不开上面例举的这几样。不过，不同的项目我们依然有很多的细节需要考量，比如数据如何做缓存、数据请求用什么、需要什么额外的组件等等。

二、项目工程目录

如果所示，项目工程目录结构大致如上图所示。

1、assets，项目共用静态资源，比如icon图标、字体文件等等。
2、components，项目组件。
3、pages，页面级别的组件。
4、services，数据请求相关。
5、store，全局数据状态管理。
6、styles，样式文件。
7、utils，项目中使用的相关工具包。
8、config，项目配置。
9、index.tsx，项目根组件。

三、那些好用的第三方包

依赖包
如图所示，React-Native项目，可能需要用到这么一些包。

@react-navigation

这是 React-Native 官方推荐的路由包，其基本概念以栈路由、tab路由为主。

@reduxjs/toolkit、react-redux、redux-thunk

这是 React-Native 的全局数据状态管理相关的包。

react-native-paper

这是 React-Native 的一个UI组件库，遵循Material设计规范。

英文解释：Cross-platform Material Design for React Native

react-native-storage

这是 React-Native 的本地缓存

在正常的项目使用中，以这样的方式进行配置

// utils/Storage.ts
import Storage from 'react-native-storage';
import AsyncStorage from '@react-native-community/async-storage';

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

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

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

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

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

export default storage;