React Native+expo跨端开发

duola/
├─ app/                       # 路由驱动的页面（Screen）——全部 *.tsx
│  ├─ _layout.tsx             # 顶层布局，放导航容器 / 全局 Provider
│  ├─ +not-found.tsx          # 404页
│  ├── (tabs)/                # Tab 底部导航页
│  │   ├── index.tsx          # (首页)复习页面
│  │   ├── cards.tsx          # 卡片库页面
│  │   ├── chat.tsx           # 聊天页
│  │   └── settings.tsx       # 设置页面
│  ├─ user/                   # 用户相关页面，登陆，注册，个人中心
│  └─ test/                   # 调试测试模块，正式发布时不引用
│     ├─ sqliteViewer.tsx     # sqlite浏览器
│     └─ ...其它测试项.tsx
│
├─ src/                       # 业务逻辑层（纯 TypeScript）
│  ├─ user/                   # 用户模块逻辑
│  ├─ store/                  # 全局状态（读写token等，读设置）
│  ├─ services/               # 与后端、第三方交互
│  ├─ utils/                  # 公共工具函数
│  ├─ database/               # expo-sqlite方法
│  ├─ test/                   # 测试模块逻辑部分，正式发布时不引用
│  └─ theme/                  # 主题 / 样式变量，UI 库定制
│
├─ assets/
│  ├─ images/                 # 静态图片
│  ├─ fonts/                  # 自定义字体
│  └─ icons/                  # SVG/PNG 图标
│
├─ hooks/                     # 跨模块共用的自定义 Hook（可选）
├─ env.ts                     # 对 dotenv 或 expo-constants 的封装
└─ package.json

defaultConfig {
   	//其它配置
       resConfigs "zh", "en"                   // 只保留简体中文和英文资源
       ndk {                                   // ➜ NDK 配置
           debugSymbolLevel 'none' // 精简 native 符号表
       }
   }
splits {
       abi {
           enable true           // 开启 ABI 拆分
           reset()
           include 'armeabi-v7a', 'arm64-v8a' // 只生成 32/64 位 ARM
           universalApk false    // 不生成大而全的 universal-apk
       }
   }
buildTypes {
       // 其它配置
       release {
           // Caution! In production, you need to generate your own keystore file.
           // see https://reactnative.dev/docs/signed-apk-android.
           // signingConfig true // 注释掉使用调试签名
           shrinkResources true // 移除未用资源
           minifyEnabled true  // 开启代码混淆&优化
           proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
           crunchPngs false // 禁用 PNG 压缩
       }
   }

// app\_layout.tsx：
import { RootSiblingParent } from 'react-native-root-siblings';

return (
<RootSiblingParent>
//  其它app标签
</RootSiblingParent>
);

import Toast from 'react-native-root-toast';

// 闪现默认配置项
const defaultToastOptions = {
    duration: Toast.durations.SHORT, // 持续时间
    position: -80, // 距离顶部80像素的位置
    hideOnPress: true, // 点击隐藏
};

/**
 * @description 显示普通消息提示
 * @param {string} message - 提示消息
 * @param {object} options - 自定义配置选项
 */
export function showToast(message: string,type_msg:string='info') {
    return Toast.show(message, type_msg==='err'?{
        ...defaultToastOptions,
        textColor: '#000', //黑色字体
		backgroundColor: '#FFA500', //橙色背景
		opacity: 1, // 透明度
    }:{
        ...defaultToastOptions,
        textColor: '#FFF',
    });
}

"expo": {
    "ios": {
      "infoPlist": {
        "NSMicrophoneUsageDescription": "此应用需要访问麦克风进行录音功能"
      }
    },
    "android": {
      "permissions": [
        "RECORD_AUDIO",
        "WRITE_EXTERNAL_STORAGE",
        "READ_EXTERNAL_STORAGE"
      ],
    },
  }

{
  "expo": {
    "plugins": [
      [
        "expo-audio",
        {
          "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone."
        }
      ]
    ]
  }
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/**/*.{ts,tsx}"], // app目录下的tsx才可能包含界面样式
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};

const { withNativeWind } = require('nativewind/metro'); //添加
//其它配置
module.exports = withNativeWind(config, { input: './global.css' }) //修改

` "include": [
    // 添加
    "nativewind-env.d.ts"
  ]

const db = await SQLite.openDatabaseAsync(databaseFile, {
  useNewConnection: true
});