React-Native项目工程搭建

系列文章目录

1. React-Native环境搭建（IOS）
2. React-Native项目 — 关于IOS知识储备
3. React-Native项目工程搭建（开发模板搭建）
4. React-Native项目矢量图标库（react-native-vector-icons）
5. 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;

react-native-image-viewer

React-Native 的图片预览组件，实现大图预览功能。

react-native-looped-carousel

React-Native 的轮播组件。

react-native-refreshable-listview

React-Native 的下拉刷新组件。

react-native-simple-toast

React-Native 的一个简单的Toast组件

React-Native 只提供了安卓端的toast组件，没有提供 IOS 端的toast组件。所以这里需要一个第三方的实现。

总结

一个简单的 React-Native 项目搭建，基本完成。它完全能满足，我们针对 App 开发遇到的大多数问题。

但是，该模板搭建，没有牵扯到中国App绕不过去的一个坎，分享和支付问题。因为分享和支付，是一个重要的模块，也是我们前端中，React-Native App 开发的一个难点（需要懂一些native端的知识），需要另起章节单独说明。