React Native项目初始化及相关通用工具集成

前言

本文主要介绍开发一个React Native项目相关通用工具的介绍使用，也是对上一篇文章《从0到1搭建一个RN应用从开发测试到上架全流程》开发阶段内容的一个补充；

初始化项目

shell 复制代码

$初始化
npx create-expo-app@latest xxx//项目名(BTHApp)
$ 进入文件夹
cd BTHApp
$ 删除模板
npm run reset-project//相对干净的项目
$ 启动项目
npx expo start

通用工具

Nativewind在项目中安装以及使用

ruby 复制代码

$直接使用模板
# expo+ nativewind
npx create-expo-stack@latest --nativewind
或者
# 已有项目引入相关的包
# 下载对应的包
yarn add nativewind tailwindcss@^3.4.17 [email protected] react-native-safe-area-context
# 创建 tailwind.config.js
npx tailwindcss init
# 根目录创建global.css：添加内容如下：

@tailwind base;  
@tailwind components;  
@tailwind utilities;

# 根目录下创建babel.config.js并添加如下内容：
module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};
# 创建metro.config.js：内容入下：
const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');
const config = getDefaultConfig(__dirname)
module.exports = withNativeWind(config, { input: './global.css' })
# 导入global.css
在app/_layout.tsx中引入 import "./global.css";
# 创建nativewind-env.d.ts 使用ts
/// <reference types="nativewind/types" />
# 启动项目，开始使用
npm start
#以上配置参考：https://www.nativewind.dev/tailwind/typography/text-color

状态管理（Redux）安装以及使用

typescript 复制代码

# 下载状态管理包
yarn add @reduxjs/toolkit react-redux
# 创建一个store文件夹:目录结构如下：
store
|___index//出口文件
|___themeSlice//模块文件
# index内容：
import { configureStore } from '@reduxjs/toolkit';
import themeReducer from './themeSlice';

export const store = configureStore({
  reducer: {
    theme: themeReducer,
  },
});
# themeslice内容
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  theme: 'light',
};

const themeSlice = createSlice({
  name: 'theme',
  initialState,
  reducers: {
    toggleTheme: (state) => {
      state.theme = state.theme === 'light' ? 'dark' : 'light';
    },
  },
});
export const { toggleTheme } = themeSlice.actions;
export default themeSlice.reducer;
# 在全局挂载： 在app/_layout.tsx挂载
import { Provider, useSelector, useDispatch } from 'react-redux';
import { store } from '../store/index';
<Provider store={store}>
路由
</Provider>
# 组件中使用：
import { Provider, useSelector, useDispatch } from 'react-redux';
import { toggleTheme } from '../../store/themeSlice';
const theme = useSelector((state: any) => state.theme);//获取数据
const dispatch = useDispatch();
const handleToggleTheme = () => {
    dispatch(toggleTheme());//操作数据
  };

数据请求（axios或fetch）

csharp 复制代码

# 下载包
yarn add axios
# 进行相应的封装具体根据项目需要

自定义导航

java 复制代码

# 导航包 expo创建项目时已经下载了；
yarn add @react-navigation/native
yarn add @react-navigation/stack
yarn add react-native-screens react-native-safe-area-context

本地存储

csharp 复制代码

# 下载相应的包
yarn add @react-native-async-storage/async-storage

UI库推荐

bash 复制代码

# React Native Elements
# NativeBase
# 其他（。。。。）

Expo SDK

markdown 复制代码

# 获取原生的一些能力
例如：
1. **设备功能**
- expo-camera：访问设备的相机，支持拍照和录像。
- expo-contacts：访问设备的联系人。
- expo-sensors：访问设备的传感器，如陀螺仪。
- expo-location：访问设备的地理位置。
- expo-image-picker：从设备相册选择图片。

2. **媒体功能**
- expo-video：支持视频播放，包括锁屏控制和画中画模式。
- expo-audio：支持音频播放和录制。
- expo-live-photo：在 iOS 上支持 Live Photo 的播放。

3. **文件和存储**
- expo-file-system：支持文件的读写操作。
- expo-file-system/next：同步读写操作和有状态的文件管理。
- expo-secure-store：安全地存储敏感数据。

4. **用户界面**
- expo-router：基于文件的路由系统，支持动态路由和嵌套路由。
- expo-image：支持图片预加载和元数据访问。
- expo-splash-screen：自定义应用启动时的闪屏。

5. **网络和数据**
- expo-sharing：在设备之间共享数据。
- expo-auth-session：支持 OAuth 认证。
- expo-app-auth：用于用户认证。

6. **其他功能**
- expo-localization：支持国际化和本地化。
- expo-background-fetch：运行后台任务。
- expo-notifications：支持推送通知。

7. **其他模块**
- expo-dom：在 React Native 应用中使用 Web 组件。
- expo-modules-autolinking：自动管理原生模块的链接。

其他项目相关

markdown 复制代码

* 项目中的其他需要的包
* 代码检查工具
* 代码格式化工具
* 国际化
* ....

关于启动不能在expo go预览解决方法

arduino 复制代码

# 前提：需要梯子
# npx expo --tunnel//开启隧道
# a//编译android//构建在expo go预览
# 开启隧道比较慢偶尔还链接不上等问题

总结

以上就是开发React Native项目的通用工具包的汇总的全部内容，也是对《从0到1搭建一个RN应用从开发测试到上架全流程》文章的补充说明篇；