%20(2).svg)
项目简介
本项目是基于 React Native 框架和 Expo 工具开发的社交应用。集成了用户注册登录、动态发布与浏览、点赞互动、私信交流、个人资料编辑等丰富功能。借助 Expo 平台，该应用可在 iOS 和 Android 等多平台运行。
项目的主要特性和功能
- 多平台支持：利用 React Native 和 Expo 实现应用在 iOS 和 Android 平台的跨平台运行。
- 社交互动功能：包含用户注册、登录、发布动态、点赞、私信等常见社交功能。
- 代码规范：使用 ESLint 进行代码质量检查和格式化，保障代码规范性。
- 便捷导航：采用 React Navigation 构建导航系统，提供全面导航方案。
- 用户认证：通过 Expo Auth Session 处理用户认证和登录。
- 字体与图标管理：运用 Expo Fonts 和 Expo Icons 管理应用字体和图标。
- 路径别名：配置 Path Alias 简化代码结构，提高开发效率。
- 样式管理：支持 TailwindCSS （twrnc & nativewind），方便样式编写。
- 组件库：集成 Tamagui 组件库，丰富界面组件。
- 调试与构建：提供多种调试方式，支持 EAS 构建自定义应用。
安装使用步骤
前提条件
确保已安装 Node.js 和 npm（Node 包管理器）。
安装依赖
- 全局安装 Expo CLI 工具（若未安装）：
bash npm install -g expo-cli - 创建新的 React Native 项目：
bash npx create-expo-app@latest --template tabs@49 - 进入项目安装依赖：
bash npm i - 安装 router 等依赖：
bash npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar react-native-gesture-handler
修改命令
在 package.json 文件中修改 scripts 字段：
json
{
"scripts": {
"dev": "expo start",
"clear": "expo start --clear",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"test": "jest --watchAll",
"lint": "eslint . --fix --ext .ts,.tsx,.vue,.js,.jsx"
}
}
添加 ESLint
- 安装 ESLint 及相关配置：
bash npm i install eslint @antfu/eslint-config -D - 添加 ESLint 配置文件
.eslintrc：bash echo '{ "extends": [ "@antfu" ], "overrides": [ { "files": [ "**/*.ts", "**/*.tsx" ], "rules": { "@typescript-eslint/no-require-imports": 0, "@typescript-eslint/consistent-type-definitions": 0 } } ] }' > .eslintrc
添加 Path Alias
- 修改
app.json文件：json { "expo": { "experiments": { "typedRoutes": true, "tsconfigPaths": true } } } - 修改
tsconfig.json文件：json { "compilerOptions": { "strict": true, "baseUrl": ".", "paths": { "@/*": ["app/*"], "~/*": ["./*"] } } } - 修改
babel.config.js文件：js module.exports = function (api) { api.cache(true) return { presets: ['babel-preset-expo'], plugins: [ ['module-resolver', { alias: { '@/*': ['./app/*'], '~/*': ['./*'], }, }], // Required for expo-router 'expo-router/babel', ], } }修改完成后重启 VSCode。
添加 TailwindCSS
twrnc
- 安装：
bash npm i twrnc - 使用：直接 import 后在 style 中使用。
nativewind
- 安装：
bash npm i nativewind npm i -D tailwindcss@3.3.2 - 配置：
- 手动创建
tailwind.config.js和postcss.config.js文件并写入内容： ```bash echo 'module.exports = { content: [ "./app//*.{js,jsx,ts,tsx}", './components//*.{js,jsx,ts,tsx}', ], theme: { extend: {}, }, plugins: [], }' > tailwind.config.js
- 手动创建
echo 'module.exports = {
plugins: {
tailwindcss: {},
},
};' > postcss.config.js
- 创建 `global.css` 并在根文件引入：bash
mkdir styles;
echo '@tailwind base;
@tailwind components;
@tailwind utilities;
' > styles/global.css
- 往 `babel.config.js` 文件中写入 `plugins`：js
module.exports = function (api) {
api.cache(true)
return {
presets: ['babel-preset-expo'],
plugins: [
// Required for expo-router
'expo-router/babel',
'nativewind/babel',
],
}
}
```
添加 Tamagui
- 安装依赖：
bash npm i @tamagui/babel-plugin babel-plugin-transform-inline-environment-variables npx expo install react-native-reanimated -
在
babel.config.js中配置： ```js // Don't forget to specify your TAMAGUI_TARGET here or ideally in the command to run / .env files process.env.TAMAGUI_TARGET = 'native' module.exports = function (api) { api.cache(true) return { presets: ['babel-preset-expo'], plugins: [ // NOTE: this is required to pass the right environment [ 'transform-inline-environment-variables', // NOTE: include is optional, you can leave this part out { include: ['TAMAGUI_TARGET', 'EXPO_ROUTER_APP_ROOT'], }, ],// NOTE: this is optional, you don't need the compiler [ '@tamagui/babel-plugin', { components: ['tamagui'], config: './tamagui.config.ts', logTimings: true, }, ],
// NOTE: this is only necessary if you are using reanimated for animations 'react-native-reanimated/plugin', ], } }
3. 在 `metro.config.js` 中配置：js // Learn more https://docs.expo.io/guides/customizing-metro const { getDefaultConfig } = require('expo/metro-config') /* @type {import('expo/metro-config').MetroConfig} / const config = getDefaultConfig(__dirname, { // [Web-only]: Enables CSS support in Metro. isCSSEnabled: true, }) // Expo 49 issue: default metro config needs to include "mjs" config.resolver.sourceExts.push('mjs') module.exports = config4. 添加 Tamagui Theme： - 安装依赖：bash npm i tamagui expo-font @tamagui/font-inter @tamagui/theme-base @tamagui/animations-react-native @tamagui/config react-native-web react-dom`` - 手动添加文件tamagui.config.ts` 并写入相应内容。 - 往根文件中添加 Provider 保证组件库生效。
启动项目
bash
npx expo start
调试
推荐使用 Chrome debugger 或在 VSCode 中使用 Expo Tools 插件进行调试。
EAS 配置（用于 Native 环境功能）
- 全局安装 EAS CLI：
bash npm install -g eas-cli - 使用 Expo 账号登录 EAS。
- 配置 EAS 项目，添加 EAS 配置文件。
- 打开发包：
bash eas build --profile development --platform android - 引入
expo-dev-client依赖。 - EAS 运行调试：
bash npx expo start --dev-client
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】