Sequelize 是一个基于 Promise 的 Node.js ORM (Object-Relational Mapping) 工具，支持 PostgreSQL、MySQL、MariaDB、SQLite 和 Microsoft SQL Server 等多种数据库。

2. 安装与基本配置

安装

npm install sequelize
# 根据使用的数据库安装对应的驱动
npm install pg pg-hstore # PostgreSQL
npm install mysql2 # MySQL
npm install mariadb # MariaDB
npm install sqlite3 # SQLite
npm install tedious # Microsoft SQL Server

基本连接配置

const { Sequelize } = require('sequelize');

// 方法1: 通过URI连接
const sequelize = new Sequelize('postgres://user:pass@example.com:5432/dbname');

// 方法2: 通过参数连接
const sequelize = new Sequelize('database', 'username', 'password', {
  host: 'localhost',
  dialect: 'mysql', // 或其他数据库类型
  // 其他选项
  pool: {
    max: 5,
    min: 0,
    acquire: 30000,
    idle: 10000
  },
  logging: console.log, // 显示日志
  // 对于SQLite
  // storage: 'path/to/database.sqlite'
});

3. 模型定义

基本模型定义

const { DataTypes } = require('sequelize');

const User = sequelize.define('User', {
  // 模型属性
  firstName: {
    type: DataTypes.STRING,
    allowNull: false
  },
  lastName: {
    type: DataTypes.STRING
    // allowNull 默认为 true
  },
  age: {
    type: DataTypes.INTEGER,
    defaultValue: 18
  },
  bio: {
    type: DataTypes.TEXT
  },
  isAdmin: {
    type: DataTypes.BOOLEAN,
    defaultValue: false
  }
}, {
  // 模型选项
  tableName: 'users', // 指定表名
  timestamps: true, // 默认添加 createdAt 和 updatedAt 字段
  // createdAt: 'created_at', // 自定义字段名
  // updatedAt: 'updated_at',
  // paranoid: true, // 软删除，添加 deletedAt 字段
  // underscored: true, // 将驼峰命名转换为下划线
  // freezeTableName: true // 防止 Sequelize 自动复数化表名
});

数据类型

Sequelize 提供了多种数据类型：

• STRING / TEXT - 字符串/文本
• INTEGER / BIGINT / FLOAT / DOUBLE / DECIMAL - 数字
• BOOLEAN - 布尔值
• DATE / DATEONLY / TIME - 日期时间
• UUID - UUID
• ENUM - 枚举值
• JSON / JSONB - JSON 数据
• BLOB - 二进制数据

4. 模型同步

// 同步单个模型
await User.sync({ force: true }); // 强制同步，会删除现有表

// 同步所有模型
await sequelize.sync({ alter: true }); // 安全同步，只修改表结构以匹配模型

// 生产环境通常使用迁移而不是 sync()

5. CRUD 操作

创建记录

// 方法1: build + save
const user = User.build({
  firstName: 'John',
  lastName: 'Doe'
});
await user.save();

// 方法2: create (build + save 的快捷方式)
const user = await User.create({
  firstName: 'Jane',
  lastName: 'Doe',
  age: 25
});

查询记录

// 查找所有记录
const users = await User.findAll();

// 带条件查询
const users = await User.findAll({
  where: {
    age: {
      [Op.gt]: 18 // 大于18岁
    }
  },
  order: [['age', 'DESC']],
  limit: 10
});

// 查找单个记录
const user = await User.findOne({
  where: { firstName: 'John' }
});

// 通过主键查找
const user = await User.findByPk(1);

// 计数
const count = await User.count({
  where: {
    age: {
      [Op.gt]: 20
    }
  }
});

更新记录

// 方法1: 先查询再更新
const user = await User.findByPk(1);
if (user) {
  user.lastName = 'Smith';
  await user.save();
}

// 方法2: 直接更新
await User.update(
  { lastName: 'Smith' },
  {
    where: {
      firstName: 'John'
    }
  }
);

删除记录

// 方法1: 先查询再删除
const user = await User.findByPk(1);
if (user) {
  await user.destroy();
}

// 方法2: 直接删除
await User.destroy({
  where: {
    age: {
      [Op.lt]: 18 // 删除所有年龄小于18的记录
    }
  }
});

// 软删除 (需要启用 paranoid: true)
await user.destroy(); // 设置 deletedAt
await user.restore(); // 恢复软删除的记录

6. 查询操作符

Sequelize 提供了丰富的查询操作符：

const { Op } = require('sequelize');

// 基本比较
[Op.eq]: 3,              // = 3
[Op.ne]: 20,             // != 20
[Op.gt]: 6,              // > 6
[Op.gte]: 6,             // >= 6
[Op.lt]: 10,             // < 10
[Op.lte]: 10,            // <= 10

// 范围
[Op.between]: [6, 10],   // BETWEEN 6 AND 10
[Op.notBetween]: [11, 15], // NOT BETWEEN 11 AND 15

// 集合
[Op.in]: [1, 2],         // IN [1, 2]
[Op.notIn]: [1, 2],      // NOT IN [1, 2]

// 模糊匹配
[Op.like]: '%hat',       // LIKE '%hat'
[Op.notLike]: '%hat',    // NOT LIKE '%hat'
[Op.startsWith]: 'hat',  // LIKE 'hat%'
[Op.endsWith]: 'hat',    // LIKE '%hat'
[Op.substring]: 'hat',   // LIKE '%hat%'

// 逻辑
[Op.and]: [{a: 5}, {b: 6}], // AND (a = 5) AND (b = 6)
[Op.or]: [{a: 5}, {a: 6}],  // OR (a = 5 OR a = 6)
[Op.not]: { age: 10 }       // NOT (age = 10)

7. 关联关系

一对一关系

// User 有一个 Profile
User.hasOne(Profile);
Profile.belongsTo(User);

// 使用
const user = await User.create({ /* ... */ });
const profile = await Profile.create({ /* ... */ });
await user.setProfile(profile);
const userProfile = await user.getProfile();

一对多关系

// User 有多个 Post
User.hasMany(Post);
Post.belongsTo(User);

// 使用
const user = await User.create({ /* ... */ });
const post1 = await Post.create({ /* ... */ });
const post2 = await Post.create({ /* ... */ });
await user.addPosts([post1, post2]);
const userPosts = await user.getPosts();

多对多关系

// Post 和 Tag 多对多关系
Post.belongsToMany(Tag, { through: 'PostTags' });
Tag.belongsToMany(Post, { through: 'PostTags' });

// 使用
const post = await Post.create({ /* ... */ });
const tag1 = await Tag.create({ name: 'tech' });
const tag2 = await Tag.create({ name: 'programming' });
await post.addTags([tag1, tag2]);
const postTags = await post.getTags();

8. 事务管理

// 手动管理事务
const transaction = await sequelize.transaction();

try {
  const user = await User.create({
    firstName: 'John',
    lastName: 'Doe'
  }, { transaction });

  await Profile.create({
    userId: user.id,
    bio: 'Hello world'
  }, { transaction });

  await transaction.commit();
} catch (error) {
  await transaction.rollback();
}

// 自动管理事务
const result = await sequelize.transaction(async (t) => {
  const user = await User.create({
    firstName: 'John',
    lastName: 'Doe'
  }, { transaction: t });

  await Profile.create({
    userId: user.id,
    bio: 'Hello world'
  }, { transaction: t });

  return user;
});

9. 钩子 (Hooks)

User.beforeCreate(async (user, options) => {
  user.password = await hashPassword(user.password);
});

User.afterCreate(async (user, options) => {
  await sendWelcomeEmail(user.email);
});

User.beforeUpdate(async (user, options) => {
  if (user.changed('password')) {
    user.password = await hashPassword(user.password);
  }
});

User.afterDestroy(async (user, options) => {
  await cleanupUserData(user.id);
});

10. 作用域 (Scopes)

// 定义作用域
User.addScope('active', {
  where: {
    active: true
  }
});

User.addScope('ageGreaterThan', (value) => {
  return {
    where: {
      age: {
        [Op.gt]: value
      }
    }
  };
});

// 使用作用域
const activeUsers = await User.scope('active').findAll();
const adults = await User.scope({ method: ['ageGreaterThan', 18] }).findAll();

// 默认作用域
User.init({
  // 属性定义
}, {
  defaultScope: {
    where: {
      active: true
    }
  },
  scopes: {
    inactive: {
      where: {
        active: false
      }
    }
  }
});

11. 原始查询

// 不带模型映射的原始查询
const [results, metadata] = await sequelize.query("SELECT * FROM users WHERE age > :age", {
  replacements: { age: 18 },
  type: QueryTypes.SELECT
});

// 带模型映射的原始查询
const users = await sequelize.query("SELECT * FROM users", {
  model: User,
  mapToModel: true
});

12. 迁移 (Migrations)

在生产环境中，应该使用迁移而不是 sync() 来管理数据库结构变化。

安装 Sequelize CLI

npm install --save-dev sequelize-cli
npx sequelize-cli init

这会创建以下目录结构：

config/
  config.json
migrations/
models/
seeders/

创建迁移

npx sequelize-cli migration:generate --name create-users-table

编辑生成的迁移文件：

module.exports = {
  up: async (queryInterface, Sequelize) => {
    await queryInterface.createTable('Users', {
      id: {
        allowNull: false,
        autoIncrement: true,
        primaryKey: true,
        type: Sequelize.INTEGER
      },
      firstName: {
        type: Sequelize.STRING,
        allowNull: false
      },
      lastName: {
        type: Sequelize.STRING
      },
      age: {
        type: Sequelize.INTEGER,
        defaultValue: 18
      },
      createdAt: {
        allowNull: false,
        type: Sequelize.DATE
      },
      updatedAt: {
        allowNull: false,
        type: Sequelize.DATE
      }
    });
  },
  down: async (queryInterface, Sequelize) => {
    await queryInterface.dropTable('Users');
  }
};

运行迁移

npx sequelize-cli db:migrate

回滚迁移

npx sequelize-cli db:migrate:undo
npx sequelize-cli db:migrate:undo:all

13. 数据填充 (Seeders)

npx sequelize-cli seed:generate --name demo-user

编辑生成的种子文件：

module.exports = {
  up: async (queryInterface, Sequelize) => {
    await queryInterface.bulkInsert('Users', [{
      firstName: 'John',
      lastName: 'Doe',
      age: 25,
      createdAt: new Date(),
      updatedAt: new Date()
    }, {
      firstName: 'Jane',
      lastName: 'Doe',
      age: 30,
      createdAt: new Date(),
      updatedAt: new Date()
    }], {});
  },
  down: async (queryInterface, Sequelize) => {
    await queryInterface.bulkDelete('Users', null, {});
  }
};

运行种子：

npx sequelize-cli db:seed:all
npx sequelize-cli db:seed --seed name-of-seed-as-in-data

14. 性能优化技巧

1. 批量操作：使用 bulkCreate、update 和 destroy 进行批量操作

2. 选择性查询：只查询需要的字段

   User.findAll({
    attributes: ['id', 'firstName']
   });

3. 分页：使用 limit 和 offset 实现分页

4. 预加载关联数据：使用 include 避免 N+1 查询问题

   User.findAll({
    include: [{
      model: Post,
      include: [Tag]
    }]
   });

5. 使用索引：在经常查询的字段上创建索引

6. 避免在循环中查询：尽可能批量查询

15. 常见问题与解决方案

连接池问题

如果遇到连接池耗尽错误，可以调整连接池配置：

const sequelize = new Sequelize(/* ... */, {
  pool: {
    max: 20,    // 最大连接数
    min: 0,     // 最小连接数
    acquire: 30000, // 获取连接的最大等待时间(毫秒)
    idle: 10000     // 连接空闲时间(毫秒)，超过此时间连接会被释放
  }
});

时区问题

const sequelize = new Sequelize(/* ... */, {
  dialectOptions: {
    useUTC: false, // 对于MySQL
    timezone: '+08:00' // 设置时区
  },
  timezone: '+08:00' // ORM层时区设置
});

长连接断开

对于长时间空闲的连接可能会被数据库服务器断开，可以设置 keep-alive 查询：

setInterval(() => {
  sequelize.query('SELECT 1');
}, 60000); // 每分钟执行一次

16. 最佳实践

1. 使用迁移而不是 sync()：在生产环境中始终使用迁移来管理数据库结构变更
2. 合理使用事务：对于需要原子性操作的多个数据库操作使用事务
3. 验证输入数据：在模型层和业务逻辑层都进行数据验证
4. 处理错误：妥善处理数据库错误，提供有意义的错误信息
5. 日志记录：记录重要的数据库操作，但避免记录敏感信息
6. 索引优化：根据查询模式合理设计索引
7. 定期备份：即使有迁移脚本，也要定期备份数据库

17. 高级特性

多数据库连接

const sequelize1 = new Sequelize('database1', 'user', 'pass', { dialect: 'mysql' });
const sequelize2 = new Sequelize('database2', 'user', 'pass', { dialect: 'postgres' });

// 模型可以绑定到不同的 Sequelize 实例
const User = sequelize1.define('User', { /* ... */ });
const Product = sequelize2.define('Product', { /* ... */ });

读写分离

const sequelize = new Sequelize('database', null, null, {
  dialect: 'mysql',
  replication: {
    read: [
      { host: 'read1.example.com', username: 'readuser', password: 'readpass' },
      { host: 'read2.example.com', username: 'readuser', password: 'readpass' }
    ],
    write: { host: 'write.example.com', username: 'writeuser', password: 'writepass' }
  },
  pool: { // 为读写分离配置不同的连接池
    max: 20,
    idle: 30000
  }
});

乐观锁

const User = sequelize.define('User', {
  /* 属性定义 */
}, {
  version: true // 启用乐观锁，添加 version 字段
});

// 更新时会自动检查 version
const user = await User.findByPk(1);
try {
  user.name = 'New Name';
  await user.save(); // 如果 version 不匹配会抛出 OptimisticLockError
} catch (error) {
  if (error instanceof OptimisticLockError) {
    // 处理并发冲突
  }
}

18. 调试技巧

1. 启用 SQL 日志：

   const sequelize = new Sequelize(/* ... */, {
    logging: console.log // 或自定义日志函数
   });

2. 使用 sequelize-logger：

   npm install sequelize-logger

   const Sequelize = require('sequelize');
   require('sequelize-logger')(Sequelize); // 在创建实例前调用

3. 性能分析：

   const { QueryTypes } = require('sequelize');
   const start = Date.now();
   const users = await User.findAll();
   console.log(`Query took ${Date.now() - start}ms`);

19. 与 Express 集成示例

const express = require('express');
const { Sequelize, Op } = require('sequelize');
const app = express();

// 中间件
app.use(express.json());

// 路由
app.get('/users', async (req, res) => {
  try {
    const users = await User.findAll({
      where: {
        age: {
          [Op.gte]: req.query.minAge || 0
        }
      },
      limit: 100
    });
    res.json(users);
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: 'Internal server error' });
  }
});

app.post('/users', async (req, res) => {
  try {
    const user = await User.create(req.body);
    res.status(201).json(user);
  } catch (error) {
    console.error(error);
    res.status(400).json({ error: 'Bad request' });
  }
});

// 错误处理
app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send('Something broke!');
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, async () => {
  try {
    await sequelize.authenticate();
    console.log('Database connection has been established successfully.');
    console.log(`Server is running on port ${PORT}`);
  } catch (error) {
    console.error('Unable to connect to the database:', error);
    process.exit(1);
  }
});

20. 资源与进一步学习

• 官方文档
• Sequelize GitHub
• Sequelize Cookbook
• Sequelize 中文文档

希望这份详细的 Sequelize 使用笔记对你的开发工作有所帮助！根据实际项目需求，你可以选择适合的功能和配置来优化你的数据库操作。

Joi 是一个强大的 JavaScript 对象模式验证库，常用于 Node.js 应用中验证和转换数据。下面详细介绍 Joi 的用法。

安装

npm install joi

基本用法

1. 基本验证

const Joi = require('joi');

// 定义 schema
const schema = Joi.object({
  username: Joi.string().alphanum().min(3).max(30).required(),
  password: Joi.string().pattern(new RegExp('^[a-zA-Z0-9]{3,30}$')),
  repeat_password: Joi.ref('password'),
  email: Joi.string().email({ minDomainSegments: 2, tlds: { allow: ['com', 'net'] } })
}).with('password', 'repeat_password');

// 验证数据
const { error, value } = schema.validate({
  username: 'abc',
  password: 'password123',
  repeat_password: 'password123',
  email: 'abc@example.com'
});

if (error) {
  console.error(error.details);
} else {
  console.log('验证通过', value);
}

2. 数据类型验证

字符串验证

Joi.string()
  .alphanum()    // 只允许字母数字字符
  .min(3)        // 最小长度3
  .max(30)       // 最大长度30
  .required()    // 必填字段
  .trim()        // 自动去除前后空格
  .lowercase()   // 转换为小写
  .uppercase()   // 转换为大写
  .regex(/^[a-z]+$/) // 正则匹配

数字验证

Joi.number()
  .integer()     // 必须是整数
  .min(1)        // 最小值1
  .max(10)       // 最大值10
  .precision(2)  // 小数点后2位
  .positive()    // 必须是正数
  .negative()    // 必须是负数

布尔值验证

Joi.boolean()
  .truthy('yes') // 将'yes'视为true
  .falsy('no')   // 将'no'视为false

日期验证

Joi.date()
  .min('1-1-2000')  // 最小日期
  .max('now')       // 最大日期为现在
  .iso()            // ISO格式

数组验证

Joi.array()
  .items(Joi.string(), Joi.number()) // 数组元素可以是字符串或数字
  .length(5)       // 数组长度必须为5
  .min(1)          // 最小长度1
  .max(10)         // 最大长度10
  .unique()        // 元素必须唯一

对象验证

Joi.object({
  name: Joi.string(),
  age: Joi.number()
})
  .and('name', 'age')  // name和age必须同时存在
  .or('name', 'age')   // name或age必须存在一个
  .xor('name', 'age')  // name或age必须存在一个但不能同时存在
  .pattern(/^a/, Joi.string()) // 所有以a开头的属性必须是字符串

3. 高级验证

条件验证

const schema = Joi.object({
  isAdmin: Joi.boolean(),
  accessLevel: Joi.when('isAdmin', {
    is: true,
    then: Joi.number().valid(1, 2, 3),
    otherwise: Joi.number().valid(4, 5)
  })
});

自定义验证

const schema = Joi.object({
  password: Joi.string().custom((value, helpers) => {
    if (value.length < 8) {
      return helpers.error('password.too.short');
    }
    if (!/[A-Z]/.test(value)) {
      return helpers.error('password.no.uppercase');
    }
    return value;
  }, '密码验证')
}).messages({
  'password.too.short': '密码长度至少8个字符',
  'password.no.uppercase': '密码必须包含至少一个大写字母'
});

引用其他字段值

const schema = Joi.object({
  password: Joi.string().required(),
  confirmPassword: Joi.string().valid(Joi.ref('password')).required()
});

4. 错误处理

const { error, value } = schema.validate(data, {
  abortEarly: false, // 不遇到第一个错误就停止，收集所有错误
  allowUnknown: true, // 允许未知键
  stripUnknown: true, // 移除未知键
  convert: true      // 尝试类型转换
});

if (error) {
  // 错误详情
  error.details.forEach((detail) => {
    console.log(detail.message);
    console.log(detail.path); // 错误路径
    console.log(detail.type); // 错误类型
  });

  // 自定义错误消息
  const errors = error.details.map(detail => ({
    field: detail.path.join('.'),
    message: detail.message
  }));
}

5. 扩展和自定义

创建自定义验证规则

const customJoi = Joi.extend((joi) => {
  return {
    type: 'string',
    base: joi.string(),
    messages: {
      'string.oddLength': '{{#label}} 长度必须是奇数',
    },
    validate(value, helpers) {
      if (value.length % 2 === 0) {
        return { value, errors: helpers.error('string.oddLength') };
      }
    }
  };
});

const schema = customJoi.string().oddLength();

6. 实用方法

默认值

Joi.string().default('default value')

可选/必填

Joi.string().optional()
Joi.string().required()

允许/禁止值

Joi.string().valid('value1', 'value2') // 只允许特定值
Joi.string().invalid('value1', 'value2') // 禁止特定值

标签和描述

Joi.string().label('用户名').description('用户的登录名')

7. 数组和对象的高级用法

数组元素验证

Joi.array().items(
  Joi.object({
    id: Joi.number().required(),
    name: Joi.string().required()
  })
)

对象模式匹配

Joi.object({
  a: Joi.string(),
  b: Joi.number()
}).pattern(Joi.string().pattern(/^x/), Joi.boolean())

8. 异步验证

const schema = Joi.object({
  username: Joi.string().external(async (value, helpers) => {
    const exists = await checkUsernameExists(value);
    if (exists) {
      return helpers.error('username.exists');
    }
    return value;
  })
});

try {
  const value = await schema.validateAsync({ username: 'test' });
} catch (err) {
  console.error(err);
}

实际应用示例

用户注册验证

分页查询参数验证

const userSchema = Joi.object({
  username: Joi.string()
    .alphanum()
    .min(3)
    .max(30)
    .required()
    .label('用户名')
    .messages({
      'string.empty': '用户名不能为空',
      'string.min': '用户名长度不能少于3个字符',
      'string.max': '用户名长度不能超过30个字符'
    }),

  password: Joi.string()
    .pattern(new RegExp('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})'))
    .required()
    .label('密码')
    .messages({
      'string.pattern.base': '密码必须包含大小写字母、数字和特殊字符，且长度至少8位'
    }),

  email: Joi.string()
    .email({ minDomainSegments: 2 })
    .required()
    .label('电子邮箱'),

  birth_year: Joi.number()
    .integer()
    .min(1900)
    .max(2023)
    .label('出生年份'),

  roles: Joi.array()
    .items(Joi.string().valid('user', 'admin', 'editor'))
    .default(['user'])
    .label('角色'),

  metadata: Joi.object()
    .unknown()
    .label('元数据'),

  createdAt: Joi.date()
    .default(Date.now)
    .label('创建时间')
}).options({ abortEarly: false });

const paginationSchema = Joi.object({
  page: Joi.number()
    .integer()
    .min(1)
    .default(1)
    .label('页码'),

  pageSize: Joi.number()
    .integer()
    .min(1)
    .max(100)
    .default(10)
    .label('每页数量'),

  sort: Joi.string()
    .valid('asc', 'desc')
    .default('desc')
    .label('排序方式'),

  search: Joi.string()
    .trim()
    .max(100)
    .allow('')
    .label('搜索关键词')
});

最佳实践

1. 复用验证模式：将常用的验证模式提取为可复用的组件
2. 详细错误消息：提供有意义的错误消息
3. 尽早验证：在请求处理流程的早期进行验证
4. 区分开发和生产：在生产环境中可能不需要返回详细的验证错误
5. 结合Express中间件：创建验证中间件

function validate(schema, property = 'body') {
  return (req, res, next) => {
    const { error, value } = schema.validate(req[property], {
      abortEarly: false,
      allowUnknown: false
    });

    if (error) {
      const errors = error.details.map(detail => ({
        field: detail.path.join('.'),
        message: detail.message
      }));
      return res.status(400).json({ errors });
    }

    req[property] = value;
    next();
  };
}

// 使用示例
router.post('/users', validate(userSchema), userController.create);

Joi 提供了强大而灵活的验证功能，可以帮助你确保应用程序数据的完整性和一致性。

🗺️ 路由配置（文件系统路由）

app/
├── (tabs)/          # 嵌套布局组
│   ├── index.js     # /tabs/
│   └── [user].js    # /tabs/{user}
├── _layout.js       # 全局布局
├── index.js         # 首页 (/)
├── search/          
│   ├── index.js     # /search
│   └── [term].js    # /search/{term}
└── modal.js         # 模态屏 (/modal)

🔄 核心导航方法

import { Link, router, useRouter } from 'expo-router';

// 1. 组件导航
<Link href="/profile">前往个人页</Link>

// 2. 编程式导航
router.push('/settings');      // 跳转
router.replace('/login');      // 替换当前路由
router.back();                 // 返回

// 3. 获取路由对象
const { push, back, replace } = useRouter();

📌 动态路由参数

文件命名：[param].js
获取参数：

// app/user/[id].js
import { useLocalSearchParams } from 'expo-router';

export default function User() {
  const { id } = useLocalSearchParams(); // 获取 /user/123 中的 id
  return <Text>用户ID: {id}</Text>;
}

🖼️ 布局系统

全局布局 (app/_layout.js)：

export default function Layout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: '首页' }} />
      <Stack.Screen name="profile" options={{ headerShown: false }} />
    </Stack>
  );
}

嵌套布局：

// app/(tabs)/_layout.js
export default function TabsLayout() {
  return (
    <Tabs>
      <Tabs.Screen name="home" />
      <Tabs.Screen name="settings" />
    </Tabs>
  );
}

🔐 路由守卫（认证控制）

// app/_layout.js
import { Redirect } from 'expo-router';

export default function RootLayout() {
  const { isAuthenticated } = useAuth();

  if (!isAuthenticated) {
    return <Redirect href="/login" />;
  }

  return <Stack />;
}

🌐 深层链接配置

1. 配置 app.json：

   {
   "expo": {
   "scheme": "myapp",
   "plugins": [
     ["expo-router", { "origin": "https://yourapp.com" }]
   ]
   }
   }

2. 处理链接：

   
   // app/index.js
   import { useUrl } from 'expo-router';

export default function Home() {
const url = useUrl(); // 获取 deep link 参数
// 处理类似 myapp://user/123 的链接
}

---

### 🧩 高级路由操作
```jsx
// 1. 传递对象参数
router.push({
  pathname: '/user',
  params: { id: 123, name: 'Alice' }
});

// 2. 预加载路由
import { usePreload } from 'expo-router';
usePreload('/heavy-screen'); // 提前加载资源

// 3. 监听路由事件
import { useFocusEffect } from 'expo-router';
useFocusEffect(() => {
  console.log('屏幕已聚焦');
});

🧭 路由类型（TypeScript）

// 定义路由参数类型
export type RootStackParamList = {
  index: undefined;
  profile: { userId: string };
};

// 在组件中使用
const { userId } = useLocalSearchParams<{ userId: string }>();

⚠️ 注意事项

1. 文件约定：

   • index.js 代表目录默认路由
   • _layout.js 为布局文件
   • (group) 目录名用于逻辑分组（不显示在URL）

2. 路由行为：

   • 所有路由默认使用 栈导航（可配置为 Tabs/Drawer）
   • 路径匹配规则：app/**/*.js → /path

3. 开发工具：

   npx expo start    # 启动开发服务器
   Ctrl + R          # 查看路由调试面板

官方文档：Expo Router Docs
示例项目：GitHub - expo/router-example

💡 实用代码片段

模态屏实现：

// app/modal.js
export default function Modal() {
  return (
    <View style={{ flex: 1 }}>
      <Text>模态内容</Text>
      <Link href="../">关闭</Link> {/* 返回上级 */}
    </View>
  );
}

强制横屏页面：

// app/game/_layout.js
import * as ScreenOrientation from 'expo-screen-orientation';

export default function GameLayout() {
  useLayoutEffect(() => {
    ScreenOrientation.lockAsync(
      ScreenOrientation.OrientationLock.LANDSCAPE
    );
    return () => ScreenOrientation.unlockAsync();
  }, []);

  return <Stack />;
}

项目在next.config.js中配置了@svgr/webpack

{
  test: /\.svg$/i,
  issuer: /\.[jt]sx?$/,
  use: [
    {
      loader: '@svgr/webpack',
      options: {
        typescript: true,
        icon: true
      }
    }
  ]
}

服务端组件引入svg会报错

// Module parse failed: Unexpected token (1:0)
// You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
import BanIcon from 'public/images/icon/insights/ban.svg'

use client + 动态引入，不行

'use client'
import dynamic from 'next/dynamic';

export default async function ClientSvg(path) {
  // 成功加载
  const Svg = dynamic(() => import('public/images/icon/menu/icon_topview.svg'), { ssr: false }) 

  // 失败的加载，将path整个传入
  // Cannot find module 'public/images/icon/menu/icon_topview.svg'
  const Svg = dynamic(() => import(path), { ssr: false }) 

  // 失败的加载，将path部分传入
  // 虽然配置了webpack-loader，但无效
  // Module parse failed: Unexpected token (1:0)
  // You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
  const Svg = dynamic(() => import('public/images/icon/menu/${path}.svg'), { ssr: false }) 

  return <p>

  </p>
}

有没有webpack魔法注释可以解决上面的loader问题？没有

尝试另一种引入方法，无效

const svgDir = require.context("!@svgr/webpack!../../assets/svg/");
const Icon = svgDir("./Group 9.svg").default

目前仍然找不到合适的方法动态引入svg

转换思路

使用 img 标签来展示 svg 图标，对于没有颜色的 svg 无法显示的问题，只需要对 svg 设置 fill="currentColor" stroke="currentColor" 即可在 img 标签中渲染出有颜色的图案。

详细代码： https://gist.github.com/Jiny3213/8f6fbcb1f04299fee58ad1036a7247a9

Linux 将整个文件系统看作一棵树，这棵树的树根叫做根文件系统，用 / 表示。

常用的系统文件目录

其他文件目录

目录语义描述/bootBoot Loader Files启动 Linux 时的核心文件/devDevice Files所有 Linux 的外围设备/lost+found无家可归文件的避难所/mntMount Directory空目录，用于提供给用户临时挂接别的文件系统/optOptional add-on Apps第三方工具使用的安装目录/srvService Data/mediaRemovable Devices

虚拟文件系统

/proc 目录挂载了一个虚拟文件系统，以虚拟文件的形式映射系统与进程在内存中的运行时信息。

系统信息

/proc 下的直接子目录通常存储系统信息。

目录描述举例/proc/cpuinfo处理器的相关信息physical id、cpu cores、siblings、processor/proc/version系统的内核版本号Linux version 3.10.

进程信息

重点是 /proc/ 目录映射的进程信息。以

目录描述/proc//cmdline启动当前进程的完整命令/proc//cwd当前进程工作目录的软链/proc//environ当前进程的环境变量列表/proc//exe启动当前进程的可执行文件的软链/proc//fd目录，保持当前进程持有的文件描述符（以软链形式存在，指向实际文件）/proc//limits当前进程使用资源的软限制、硬限制（和单位）/proc/task目录，保存当前进程所运行的每一个线程的相关信息；以 ` 作为各线程的目录名，目录结构与/proc/` 相似

数据文件系统

/var 目录存放数据文件，如程序数据、日志等；但线上通常只将日志放在 /var 目录。

通过 rsyslog 记录系统级日志，配置文件为 /etc/rsyslog.conf。重点看 /var/log/messages 的配置：

<p># Log anything (except mail) of level info or higher.</p><p># Don't log private authentication messages!</p><p>*.info;mail.none;authpriv.none;cron.none                /var/log/messages</p>

*.info表示所有服务大于等于 info 优先级的信息都会记录到 /var/log/messages 中； mail.none 表示不记录任何 mail 的信息到 /var/log/messages 中。

以上配置表示：除安全认证、邮件、定时任务外，输出到 stdout、stderr 的 info 及更高级别的日志记录在 /var/log/messages 中。

参考资料：

📝 File Structure in Linux📝 Linux 文件系统目录结构浅谈 Linux 线程模型和线程切换

抽象级别和层次

最底层是硬件系统，包括内存和中央处理器（用于计算和从内存中读写数据），此外硬盘和网络接口也是硬件系统的一部分。

硬件系统之上是 内核，它是操作系统的核心。内核是运行在内存中的软件，它向中央处理器发送指令。内核管理硬件系统，是硬件系统和应用程序之间进行通信的接口。

进程 是指计算机中运行的所有程序，由内核统一管理，它们组成了最顶层，称为 用户空间。

内核和用户进程之间最主要的区别是：内核在 内核模式（kernel mode）中运行，而用户进程则在 用户模式（user mode）中运行。在内核模式中运行的代码可以不受限地访问中央处理器和内存，这种模式功能强大，但也非常危险，因为内核进程可以轻而易举地使整个系统崩溃。那些只有内核可以访问的空间我们称为 内核空间（kernel space）。

硬件系统

主内存（main memory）或许是所有硬件系统中最为重要的部分。基本上来讲，主内存存储 0 和 1 这样的数据。我们将每个 0 和 1 称为一个比特（或位，bit）。内核和进程就在主内存中运行，它们就是一系列比特的大合集。所有外围设备的数据输入和输出都通过主内存完成，同样是以一系列 0 和 1 的形式。中央处理器像一个操作员一样处理内存中的数据，它从内存读取指令和数据，然后将运算结果写回内存。

内核

Linux 系统的核心是 内核。内核控制着计算机系统上的所有硬件和软件，在必要时分配硬件，并根据需要执行软件。

内核主要负责管理以下四种功能：

进程管理：内核决定哪个进程可以使用 CPU内存管理：内核管理所有的内存，为进程分配内存，管理进程间的共享内存以及空闲内存设备驱动程序和设备管理：作为硬件系统（如磁盘）和进程之间的接口，内核负责操控硬件设备系统调用和系统支持：进程通常使用系统调用和内核进行通信

系统调用和系统支持

内核还对用户进程提供其他功能。例如，系统调用（system call 或 syscall）为进程执行一些它们不擅长或无法完成的工作。打开、读取和写文件这些操作都涉及系统调用。

fork：exec：

系统内存管理

操作系统内核的主要功能之一就是内存管理。内核不仅管理服务器上的可用物理内存，还可以创建和管理虚拟内存（即实际并不存在的内存）。

内核通过硬盘上的存储空间来实现虚拟内存，这块区域称为 交换空间（swap space）。内核不断在交换空间和实际的物理内存之间反复交换虚拟内存中的内容。

软件程序管理

Linux 操作系统将运行中的程序称为进程。

内核创建了第一个进程（称为 init 进程）来启动系统上所有其他进程。当内核启动时，它会将 init 进程加载到虚拟内存中。内核在启动任何其他进程时，都会在虚拟内存中给新进程分配一块专有区域来存储该进程用到的数据和代码。

硬件设备管理

任何 Linux 系统需要与之通信的设备，都需要在内核代码中加入其驱动程序代码。驱动程序代码相当于应用程序和硬件设备的中间人，允许内核与设备之间交换数据。在 Linux 内核中有两种方法用于插入设备驱动代码：

编译进内核的设备驱动代码可插入内核的设备驱动模块
Linux 系统将硬件设备当成特殊的文件，称为设备文件。设备文件有三种分类：

字符型设备文件：指处理数据时每次只能处理一个字符的设备（大多数类型的调制解调器和终端都是作为字符型设备文件创建）；块设备文件：指处理数据时每次能处理大块数据的设备，比如硬盘；网络设备文件：指采用数据包发送和接收数据的设备，包括各种网卡和一个特殊的回环设备。这个回环设备允许 Linux 系统使用常见的网络编程协议同自身通信。
Linux 为系统上的每个设备都创建一种称为 节点 的特殊文件。与设备的所有通信都通过设备节点完成。每个节点都有唯一的数值对供 Linux 内核标识它。数值对包括一个主设备号和一个次设备号。类似的设备被划分到同样的主设备号下。次设备号用于标识主设备组下的某个特定设备。

文件系统管理

Linux 内核支持通过不同类型的文件系统从硬盘中读写数据。

Linux 内核采用虚拟文件系统（Virtual File System，VFS）作为和每个文件系统交互的接口。这为 Linux 内核同任何类型文件系统通信提供了一个标准接口。当每个文件系统都被挂载和使用时，VFS 将信息都缓存在内存中。

1. 使用 React Native 社区库

React Native 社区提供了许多开源库来处理语音识别功能，其中最常用的是 react-native-voice 和 @react-native-community/voice。

安装依赖

首先安装 @react-native-community/voice 库：

npm install @react-native-community/voice

或者使用 Yarn：

yarn add @react-native-community/voice

如果你使用的是 React Native 0.60 及以上版本，库会自动链接。如果低于该版本，需要手动链接：

react-native link @react-native-community/voice

对于 iOS，还需要额外配置：

• 打开 Xcode 项目，在 Info.plist 文件中添加以下权限声明：

  <key>NSSpeechRecognitionUsageDescription</key>
  <string>我们需要您的许可来使用语音识别功能</string>
  <key>NSMicrophoneUsageDescription</key>
  <string>我们需要访问麦克风以录制您的语音</string>

对于 Android，在 AndroidManifest.xml 中添加以下权限：

<uses-permission android:name="android.permission.RECORD_AUDIO" />

代码实现

以下是一个简单的示例代码，展示如何使用 @react-native-community/voice 实现语音转文字功能：

import React, { useEffect, useState } from 'react';
import { Button, Text, View, PermissionsAndroid, Platform } from 'react-native';
import Voice from '@react-native-community/voice';

const App = () => {
  const [recognizedText, setRecognizedText] = useState('');
  const [isListening, setIsListening] = useState(false);

  // 请求权限
  const requestAudioPermission = async () => {
    if (Platform.OS === 'android') {
      try {
        const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
          {
            title: 'Microphone Permission',
            message: 'App needs access to your microphone to recognize speech.',
            buttonNeutral: 'Ask Me Later',
            buttonNegative: 'Cancel',
            buttonPositive: 'OK',
          }
        );
        return granted === PermissionsAndroid.RESULTS.GRANTED;
      } catch (err) {
        console.warn(err);
        return false;
      }
    }
    return true; // iOS 不需要额外请求权限
  };

  // 初始化语音识别事件监听器
  useEffect(() => {
    Voice.onSpeechStart = onSpeechStart;
    Voice.onSpeechRecognized = onSpeechRecognized;
    Voice.onSpeechEnd = onSpeechEnd;
    Voice.onSpeechError = onSpeechError;
    Voice.onSpeechResults = onSpeechResults;

    return () => {
      Voice.destroy().then(Voice.removeAllListeners);
    };
  }, []);

  // 开始语音识别
  const startSpeechToText = async () => {
    const isPermissionGranted = await requestAudioPermission();
    if (!isPermissionGranted) {
      console.log('录音权限未授予');
      return;
    }

    try {
      await Voice.start('zh-CN'); // 设置语言为中文（可根据需求修改）
      setIsListening(true);
    } catch (e) {
      console.error(e);
    }
  };

  // 停止语音识别
  const stopSpeechToText = async () => {
    try {
      await Voice.stop();
      setIsListening(false);
    } catch (e) {
      console.error(e);
    }
  };

  // 事件处理函数
  const onSpeechStart = () => {
    console.log('语音识别开始');
  };

  const onSpeechRecognized = () => {
    console.log('语音被识别');
  };

  const onSpeechEnd = () => {
    console.log('语音识别结束');
    setIsListening(false);
  };

  const onSpeechError = (e) => {
    console.error('语音识别错误:', e);
  };

  const onSpeechResults = (e) => {
    console.log('语音识别结果:', e.value[0]);
    setRecognizedText(e.value[0]); // 获取第一个识别结果
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 20, marginBottom: 20 }}>识别结果: {recognizedText}</Text>
      <Button
        title={isListening ? '停止录音' : '开始录音'}
        onPress={isListening ? stopSpeechToText : startSpeechToText}
      />
    </View>
  );
};

export default App;

2. 使用云服务 API

如果需要更高的准确率或支持更多语言，可以使用第三方云服务（如 Google Cloud Speech-to-Text、Microsoft Azure Speech Service 或百度语音识别等）。

步骤概述

1. 注册并获取云服务的 API 密钥。
2. 使用 react-native-sound-recorder 或类似库录制音频。
3. 将录制的音频文件上传到云服务，并通过 API 获取识别结果。

示例：使用 Google Cloud Speech-to-Text

1. 安装录音库：

   npm install react-native-sound-recorder

2. 配置 Google Cloud Speech-to-Text API 并上传音频文件。

3. 解析返回的 JSON 数据，提取识别结果。

由于此方法涉及较多后端逻辑，适合有一定开发经验的开发者。

3. 注意事项

• 设备兼容性：不同设备对语音识别的支持可能有所不同，建议在主流设备上进行测试。
• 权限管理：确保正确处理录音权限，尤其是在 Android 和 iOS 上。
• 语言设置：根据用户需求选择合适的语言代码（如 en-US 表示美式英语，zh-CN 表示简体中文）。

总结

对于大多数应用场景，推荐使用 @react-native-community/voice 库，因为它简单易用且支持本地语音识别。如果需要更高精度或跨平台支持，可以选择云服务 API。希望上述内容能帮助你顺利实现语音转文字功能！如果有进一步的问题，请随时提问！

要将百度语音识别服务与 React Native 配合使用，可以按照以下步骤实现。百度语音识别提供了强大的语音转文字功能，并且支持多种语言和场景。以下是详细的实现步骤：

1. 准备工作

注册百度云账号并获取 API 密钥

1. 访问 百度智能云 并注册账号。
2. 创建一个语音识别应用，获取 API Key 和 Secret Key。
3. 下载百度语音 SDK（可选），但这里我们主要通过 RESTful API 实现。

2. 安装依赖

为了实现录音和音频处理，我们需要安装以下依赖：

• react-native-sound-recorder：用于录制音频。
• axios 或 fetch：用于发送 HTTP 请求到百度语音识别 API。

npm install react-native-sound-recorder axios

如果你使用的是 React Native 0.60 及以上版本，库会自动链接。如果低于该版本，需要手动链接。

3. 录制音频

使用 react-native-sound-recorder 录制音频文件。百度语音识别支持 PCM 格式的音频文件。

import SoundRecorder from 'react-native-sound-recorder';

const startRecording = async () => {
  try {
    await SoundRecorder.start(SoundRecorder.PATH_CACHE + '/audio.pcm', {
      format: 'pcm',
      encoder: 'pcm',
      channels: 1, // 单声道
      sampleRate: 16000, // 百度语音识别要求的采样率
    });
    console.log('开始录音');
  } catch (error) {
    console.error('录音失败:', error);
  }
};

const stopRecording = async () => {
  try {
    const filePath = await SoundRecorder.stop();
    console.log('录音结束，文件路径:', filePath);
    return filePath;
  } catch (error) {
    console.error('停止录音失败:', error);
  }
};

4. 获取百度语音识别 Token

百度语音识别 API 使用 OAuth 2.0 授权机制，因此需要先获取 access_token。

import axios from 'axios';

const getAccessToken = async (apiKey, secretKey) => {
  const url = `https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=${apiKey}&client_secret=${secretKey}`;
  try {
    const response = await axios.get(url);
    return response.data.access_token;
  } catch (error) {
    console.error('获取 access_token 失败:', error);
    throw error;
  }
};

5. 调用百度语音识别 API

将录制的音频文件上传到百度语音识别 API，并解析返回的结果。

发送音频文件

百度语音识别支持两种方式：

• 直接上传音频数据（适合短语音）。
• 通过 WebSocket 流式上传（适合长语音）。

以下是一个简单的示例，使用直接上传的方式：

const recognizeSpeech = async (filePath, accessToken) => {
  const url = `https://vop.baidu.com/server_api?dev_pid=1537&cuid=YOUR_DEVICE_ID&token=${accessToken}`;

  // 读取音频文件内容
  const audioData = await RNFS.readFile(filePath, 'base64');

  try {
    const response = await axios.post(url, {
      format: 'pcm',
      rate: 16000,
      channel: 1,
      token: accessToken,
      speech: audioData, // Base64 编码的音频数据
      len: audioData.length,
    });

    if (response.data.err_no === 0) {
      console.log('识别结果:', response.data.result[0]);
      return response.data.result[0]; // 返回识别的文字
    } else {
      console.error('识别失败:', response.data.err_msg);
      throw new Error(response.data.err_msg);
    }
  } catch (error) {
    console.error('语音识别请求失败:', error);
    throw error;
  }
};

6. 完整代码示例

以下是一个完整的示例，展示如何录制音频并通过百度语音识别 API 转换为文字：

import React, { useState } from 'react';
import { Button, Text, View } from 'react-native';
import SoundRecorder from 'react-native-sound-recorder';
import axios from 'axios';

const App = () => {
  const [recognizedText, setRecognizedText] = useState('');
  const apiKey = 'YOUR_API_KEY'; // 替换为你的 API Key
  const secretKey = 'YOUR_SECRET_KEY'; // 替换为你的 Secret Key

  const startRecording = async () => {
    try {
      await SoundRecorder.start(SoundRecorder.PATH_CACHE + '/audio.pcm', {
        format: 'pcm',
        encoder: 'pcm',
        channels: 1,
        sampleRate: 16000,
      });
      console.log('开始录音');
    } catch (error) {
      console.error('录音失败:', error);
    }
  };

  const stopRecordingAndRecognize = async () => {
    try {
      const filePath = await SoundRecorder.stop();
      console.log('录音结束，文件路径:', filePath);

      // 获取 access_token
      const accessToken = await getAccessToken(apiKey, secretKey);

      // 调用百度语音识别 API
      const result = await recognizeSpeech(filePath, accessToken);
      setRecognizedText(result);
    } catch (error) {
      console.error('语音识别失败:', error);
    }
  };

  const getAccessToken = async (apiKey, secretKey) => {
    const url = `https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=${apiKey}&client_secret=${secretKey}`;
    const response = await axios.get(url);
    return response.data.access_token;
  };

  const recognizeSpeech = async (filePath, accessToken) => {
    const url = `https://vop.baidu.com/server_api?dev_pid=1537&cuid=YOUR_DEVICE_ID&token=${accessToken}`;
    const audioData = await RNFS.readFile(filePath, 'base64');

    const response = await axios.post(url, {
      format: 'pcm',
      rate: 16000,
      channel: 1,
      token: accessToken,
      speech: audioData,
      len: audioData.length,
    });

    if (response.data.err_no === 0) {
      return response.data.result[0];
    } else {
      throw new Error(response.data.err_msg);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 20, marginBottom: 20 }}>识别结果: {recognizedText}</Text>
      <Button title="开始录音" onPress={startRecording} />
      <Button title="停止录音并识别" onPress={stopRecordingAndRecognize} />
    </View>
  );
};

export default App;

7. 注意事项

1. 音频格式：百度语音识别要求音频为单声道、16kHz 采样率的 PCM 格式。
2. 网络权限：确保在 Android 和 iOS 上添加网络权限。
   • Android: 在 AndroidManifest.xml 中添加 <uses-permission android:name="android.permission.INTERNET" />
   • iOS: 默认支持网络权限。
3. 错误处理：百度语音识别 API 返回的错误码需要仔细处理，例如 3300 表示参数错误，3301 表示音频质量问题等。

8. 总结

通过上述步骤，你可以轻松地在 React Native 应用中集成百度语音识别功能。此方法适用于大多数场景，尤其是需要高精度识别的场合。如果遇到问题或需要进一步优化，请随时提问！

一、核心概念

1. 工作线程：动画在 UI 线程执行（非 JS 线程），避免卡顿
2. 共享值（Shared Values）：动画的驱动数据（代替 Animated.Value）
3. 动画修饰器：定义动画行为（如 withTiming, withSpring）
4. 手势集成：与 react-native-gesture-handler 深度结合

二、安装

# 安装依赖
npm install react-native-reanimated

# 或使用 Expo
expo install react-native-reanimated

在 babel.config.js 中添加插件：

plugins: ['react-native-reanimated/plugin']

三、核心 API 清单

1. 动画值

2. 动画样式

3. 动画函数

4. 手势处理

5. 布局动画

四、关键用法示例

示例1: 基础动画（缩放+透明度）

import Animated, { 
  useSharedValue, 
  useAnimatedStyle, 
  withTiming 
} from 'react-native-reanimated';

const ScaleBox = () => {
  const scale = useSharedValue(1);
  const opacity = useSharedValue(1);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
    opacity: opacity.value
  }));

  const onPress = () => {
    scale.value = withTiming(0.8, { duration: 300 });
    opacity.value = withTiming(0.5, { duration: 300 });
  };

  return (
    <Animated.View style={[styles.box, animatedStyle]}>
      <Button title="Animate" onPress={onPress} />
    </Animated.View>
  );
};

示例2: 手势拖拽

import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import Animated, { useSharedValue, useAnimatedStyle } from 'react-native-reanimated';

const Draggable = () => {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  const panGesture = Gesture.Pan()
    .onChange((e) => {
      translateX.value += e.changeX;
      translateY.value += e.changeY;
    });

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [
      { translateX: translateX.value },
      { translateY: translateY.value }
    ]
  }));

  return (
    <GestureDetector gesture={panGesture}>
      <Animated.View style={[styles.draggable, animatedStyle]} />
    </GestureDetector>
  );
};

示例3: 关键帧动画

import { Keyframe } from 'react-native-reanimated';

const keyframe = new Keyframe({
  0: {
    transform: [{ rotate: '0deg' }],
    opacity: 0
  },
  30: {
    opacity: 0.3
  },
  100: {
    transform: [{ rotate: '360deg' }],
    opacity: 1
  }
});

// 使用
rotation.value = keyframe;

五、布局动画示例

import Animated, { Layout } from 'react-native-reanimated';

const ListItem = ({ text }) => (
  <Animated.View 
    layout={Layout.springify()} // 自动添加布局动画
    style={styles.item}
  >
    <Text>{text}</Text>
  </Animated.View>
);

// 进入/退出动画
<Animated.View 
  entering={FadeIn.duration(500)} 
  exiting={FadeOut}
/>

六、性能优化技巧

1. 减少 JS 线程通信：
   • 使用 runOnJS 在 UI 线程执行简单逻辑

     useAnimatedReaction(
     () => scroll.value,
     (scroll) => runOnJS(updateBackend)(scroll)
     );

2. 避免频繁更新：用 useDerivedValue 代替多个独立值
3. 简化样式：合并 useAnimatedStyle 调用

七、调试工具

import { enableLayoutAnimations } from 'react-native-reanimated';

// 开发时启用布局动画
enableLayoutAnimations(true);

// 日志调试
import { log } from 'react-native-reanimated';
useDerivedValue(() => log('Value:', sharedValue.value));

八、官方资源

• 文档
• API 参考
• 示例仓库

注意：Reanimated 3.x+ 要求 React Native ≥ 0.64，推荐使用函数式组件和 Hooks 写法。

JavaScript 是一种 弱类型语言 或者说 动态语言。这意味着你不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

这也意味着你可以使用同个相同名称的变量保存不同类型的数据：

<p>var foo = 42;</p><p>// foo is a Number now</p><p>
</p><p>var foo = 'bar';</p><p>// foo is a String now</p><p>
</p><p>var foo = true;</p><p>// foo is a Boolean now</p>

💡 ECMAScript 标准定义了原始数据类型和引用数据类型，共七种内置类型：

原始数据类型（基本类型）：按值访问，可以操作保存在变量中实际的值。空值（null）未定义（undefined）布尔值（boolean）数字（number）字符串（string）符号（symbol）
引用类型（复杂数据类型）：引用类型的值是保存在内存中的对象。对象（Object）布尔对象（Boolean）数字对象（Number）字符串对象（String）函数对象（Function）数组对象（Array）日期对象（Date）正则对象（RegExp）错误对象（Error）

⚠️ 注意： 与其他语言不同的是，JavaScript 不允许直接访问内存中的位置，也就是说不能直接操作对象的内存空间。在操作对象时，实际上是在操作对象的引用而不是实际的对象。所以引用类型的值是按引用访问的。

原始数据类型

空值

空值 null 是一个字面量，它不像 undefined 是全局对象的一个属性。

null 是表示缺少的标识，指示变量未指向任何对象。把 null 作为尚未创建的对象，也许更好理解。

🌰 代码示例：

foo 不存在，它从来没有被定义过或者是初始化过。

<p>foo;</p><p>> "ReferenceError: foo is not defined"</p>

foo 现在已经是知存在的，但是它没有类型或者是值。

<p>var foo = null;</p><p>foo;</p><p>> null</p>

未定义值

未定义值 undefined 是全局对象的一个属性。也就是说，它是全局作用域的一个变量。undefined 的最初值就是原始数据类型 undefined。

<p>var foo;</p><p>
</p><p>console.log(foo);</p><p>// undefined</p>

布尔值

布尔类型表示一个逻辑实体，可以有两个值：true 和 false

数字

进制数

十进制：JavaScript 中默认的进制数八进制：第一位必须是 0，然后是 0-7 的数字组成十六进制：前两位必须是 0x，然后是 0-9 及 A-F（字母不区分大小写）

<p>// 十进制</p><p>var num1 = 10;</p><p>
</p><p>// 八进制的56</p><p>var num2 = 070;</p><p>
</p><p>// 十进制，因为有数字超过了7，这里是79</p><p>var num3 = 079;</p><p>
</p><p>// 十六进制的31</p><p>var num4 = 0x1f;</p>

⚠️ 注意： 八进制在严格模式下 "use strict" 是无效的，会导致 JavaScript 报错，避免使用。

浮点数

<p>var num = 0.1 + 0.2;</p><p>var sum = '2.3' * 100;</p><p>
</p><p>console.log(num);</p><p>// 0.30000000000000000004</p><p>
</p><p>console.log(sum);</p><p>// 229.99999999999997</p>

上面例子表达的就是 JavaScript 的浮点型数据在计算时容易丢失精度，这一点并不仅在 JavaScript 存在，建议处理这方面问题使用专用的数字处理类，比如 Java 里的 BigDecima 类来处理。

数字的范围

JavaScript 中数值的范围是有效位数的，基本上够我们使用，我们仅需要知道以下几个知识点：

Number.MIN_VALUE 或 Number.NEGATIVE_INFINITY：表示 JavaScript 中的最小值Number.MAX_VALUE 或 Number.POSITIVE_INFINITY：表示 JavaScript 中的最大值Infinity：表示无穷大-Infinity：表示无穷小

NaN

NaN （Not a number）的含义是本该返回数值的操作未返回数值，返回了 NaN 就不会抛出异常影响语句流畅性。

NaN 属性的初始值就是 NaN，和 Number.NaN 的值一样。

在现代浏览器中（ES5 环境）， NaN 属性是一个不可配置（non-configurable）、不可写（non-writable）的属性。但在 ES3 中，这个属性的值是可以被更改的，但是也应该避免覆盖。

编码中很少直接使用到 NaN。通常都是在计算失败时，作为 Math 的某个方法的返回值出现的（例如：Math.sqrt(-1)）或者尝试将一个字符串解析成数字但失败了的时候（例如：parseInt("blabla")）。

字符串

JavaScript 的字符串类型用于表示文本数据。它是一组 16 位的无符号整数值的元素。在字符串中的每个元素占据了字符串的位置。第一个元素的索引为 0，下一个是索引 1，依此类推。字符串的长度是它的元素的数量。

<p>'foo';</p><p>'bar';</p><p>'1234';</p><p>'one line \n another line';</p><p>"John's cat";</p>

符号

符号（Symbols）是 ECMAScript 第 6 版新定义的。该类型的性质在于这个类型的值可以用来创建匿名的对象属性。该数据类型通常被用作一个对象属性的键值，当这个属性是用于类或对象类型的内部使用的时候。

<p>var myPrivateMethod = Symbol();</p><p>
</p><p>this[myPrivateMethod] = function () {</p><p>  // ...</p><p>};</p>

引用数据类型

引用类型通常叫做类（Class），也就是说，遇到引用值，所处理的就是对象。

在 ECMA-262 标准中根本没有出现 类 这个词，而是定义了 对象定义，逻辑上等价于其他程序设计语言中的类。

对象是由 new 运算符加上要实例化的对象的名字创建的。

例如，下面的代码创建 Object 对象的实例：

<p>var o = new Object();</p>

这种语法与 Java 语言的相似，不过当有不止一个参数时，ECMAScript 要求使用括号。

如果没有参数，如以下代码所示，括号可以省略：

<p>var o = new Object();</p>

尽管括号不是必需的，但是为了避免混乱，最好使用括号。

参考资料：

📖 Symbol 术语表📖 Global Objects

同样地，ECMAScript 也定义了一些关键字、字面量以及行尾分号补全的规则。

字符集

JavaScript 程序使用 Unicode 字符集编写。Unicode 是 ASCII 和 Latin-1 的超集，并支持地球上几乎所有在使用的语言。ECMAScript3 要求 JavaScript 的实现必须支持 Unicode2.1 及后续版本，ECMAScript5 则要求支持 Unicode3 及后续版本。

区分大小写

JavaScript 是区分大小写的语言，也就是说，关键字、变量、函数名和所有的标识符（Identifier）都必须采取一致的大小写的形式。但是需要注意的是，HTML 和 CSS 并不区分大小写（尽管 XHTML 区分大小写），也就是说如果我们在用 JavaScript 控制 HTML 属性的时候对 HTML 来说 id 和 ID 没区别，但是 JavaScript 有区别。

🌰 代码示例：

abc、Abc、aBc、abC、ABC 是五个不同的变量名。

var abc = 1;

var Abc = 2;

var aBc = 3;

var abC = 4;

var ABC = 5;

console.log(abc, Abc, aBc, abC, ABC); // 1 2 3 4 5

空格、换行符和格式控制符

JavaScript 会忽略程序中 标识（Token）之间的空格。多数情况下，JavaScript 同样会忽略换行符。由于可以在代码中随意使用空格和换行，因此可以采用整齐、一致的缩进来形成统一的编码风格，从而提高代码的可读性。

空白字符

空白字符 WhiteSpace

\u0009 水平制表符

\u000B 垂直制表符

\u000C 换页符

\u0020 空格符

\u00A0 非中断空格符

\uFEFF 字符序标记

行终止符

行终止符 LineTerminator

\u000A 换行符

\u000D 回车符

\u2028 行分隔符

\u2029 段落分割符

⚠️ 注意：回车符加换行符在一起被解析成一个单行结束符

Unicode 转义序列

在有些计算机硬件和软件里，无法显示或输入 Unicode 字符全集。为了兼容，JavaScript 定义了一种特殊序列，使用 6 个 ASCII 字符来代表任意 16 位 Unicode 内码。这些 Unicode 转义序列均以 \u 为前缀，其后跟随 4 个十六进制数（使用数数字以及大写或小写的字母 A~F 表示），可以用于 JavaScript 直接量、正则表达式和标识符中（关键字除外）。

注释

JavaScript 不会执行注释。

我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。

单行注释

单行注释以两个斜杠开头

let a;

多行注释

多行注释又叫块级注释，以 /* 开头，以 */ 结尾

/*

以下代码为

声明变量并

赋值

*/

let a;

a = 1;

块级注释 /**/ 可以跨行书写，但不能嵌套，否则会报错。

// Error

/*

注释1

/*

注释1.1

*/

*/

块级注释 /**/ 中的那些字符也可能出现在正则表达式字面量里，所以块级注释对于被注释的代码块来说是不安全的。

/*

var rm_a = /a*/.match(s);

*/

阻止执行

注释可用于阻止其中一条代码行的执行（可用于调试）：

// var a = 1;

var a = 2;

行末注释

在下面的例子中，我们把注释放到代码行的结尾处：

var x = 5; // 声明 x 并把 5 赋值给它

var y = x + 2; // 声明 y 并把 x+2 赋值给它

直接量

JavaScript 数据直接量：直接量（Literals），又名字面量，就是可以在程序中直接使用的数据。

主要有以下几种直接量：

空直接量

null;

布尔直接量

true;

false;

数值直接量

// 十进制

1234567890;

⚠️ 注意：十进制数值直接量可以以 0 开头，但是如果 0 以后的最高位比 8 小，数值将会被认为是八进制而不会报错

// 二进制

0b10000000000000000000000000000000;

// 2147483648

二进制表示为开头是 0 后接大写或小写的 B（0b或者0B）。如果0b之后有除了 0 或 1 以外的数字，将会抛出错误。

// 八进制

0o755;

// 493

进制表示为开头是 0 后接大写或小写的 O（0o 或 0O）。如果有不在 01234567 中的数字，将会抛出错误。

// 十六进制

0xfffffffffffffffff;

// 295147905179352830000

十六进制表示为开头是 0 后接大写或小写的 X（0x或0X）。如果有不在 0123456789ABCDEF 中的数字，将会抛出错误。

字符串直接量

'foo';

'bar';

// 十六进制转义序列

'\xA9'; // "©"

// Unicode转义序列

'\u00A9'; // "©"

对象直接量

var o = { a: 'foo', b: 'bar', c: 42 };

// ES6中的简略表示方法

var a = 'foo',

b = 'bar',

c = 42;

var o = { a, b, c };

// 不需要这样

var o = { a: a, b: b, c: c };

数组直接量

[1954, 1974, 1990, 2014];

正则表达式直接量

一个空的正则表达式直接量，必须有一个空的非捕获分组，以避免被当成是行注释符号。

/ab+c/g

/(?:)/

模板字符串直接量

`string text``string text line 1

string text line 2`string text ${expression} string text;

标识符

标识符，就是指变量、函数、属性的名字，或者函数的参数。标识符可以是按照下列格式规则组合起来的一或多个字符。

• 第一个字符必须是一个字母、下划线（_）、或一个美元符号（$）
• 其他字符可以是字母、下划线、美元符号或数字

标识符中的字母也可以包含扩展的 ASCII 或 Unicode 字母字符，但我们不推荐这样做。

按照惯例，ECMAScript 标识符采用驼峰大小写格式，也就是第一个字母小写，剩下的每个单词的首字母大写。

const firstSecond = 123;

const myCar = 'Toyota';

const doSomethingImportant = function () {};

虽然没有谁强制要求必须采用这种格式，但为了与 ECMAScript 内置的函数和对象命名格式保持一致，可以将其当作一种最佳实践。

⚠️ 注意：不能把关键字、保留字、true、false 和 null 用作标识符。

关键字和保留字

和其他任何编程语言一样，JavaScript 保留了一些标识符为自己所用。这些保留字不能用做普通的标识符。由于好多参考书的误导，貌似保留字和关键字是分开的，其实并不是，关键字只是保留字的一部分。

保留字包括关键字、未来保留字、空字面量和布尔值字面量。

保留字

• 关键字 Keyword
• 未来保留字 FutureReservedWord
• 空字面量 NullLiteral
• 布尔值字面量 BooleanLiteral

关键字

以下关键字 ES6 规范中已实现

break do instanceof typeof

case else new var

catch finally return void

continue for switch while

debugger function this with

default if throw delete

in try class extends

const export import

未来保留字

以上是 ECMAScript6 的保留字，但在 ECMAScript3 版本中的保留字并不一样，若希望代码能在基于 ECMAScript3 实现的解释器上运行的话，应该避免使用以下保留字作为标识符。

abstract boolean byte char

constdouble enum final float

goto implements int interfacelong

native package private protected

public short static super

throw transient volatile synchronized

预定义变量和函数

此外，JavaScript 预定义了很多全局变量和函数，应该避免把它们的名字用做标识符名。

String Number Boolean Array

Date Function Math Object

RegExp Error EvalError JSON

Infinity NaN isNaN isFinite

undefined arguments parseInt parseFloat

eval decodeURI encodeURI decodeURIComponent

encodeURIComponent RangeError ReferenceError

TypeError URIError SyntaxError

分号

JavaScript 使用分号 ; 将语句分隔开，这对增强代码的可读性和整洁性是非常重要的。

有些地方可以省略分号，有些地方则不能省略分号。

• 两条语句用两行书写，第一个分号可以省略

a = 3;

b = 4;

• 两条语句用一行书写，第一个分号不能省略

a = 3;

b = 4;

但 JavaScript 并不是在所有换行处都填补分号，只有在缺少了分号无法正确解析代码时，JavaScript 才会填补分号。换句话说，如果当前语句和随后的非空格字符不能当成一个整体来解析的话，JavaScript 就在当前语句行结束处填补分号。

🌰 代码示例：

var a;

a = 3;

console.log(a);

JavaScript 将其解析为:

var a;

a = 3;

console.log(a);

自动分号补全

JavaScript 并不是在所有换行处都填补分号，只有在缺少了分号就无法正确解析代码时，JavaScript 才会填补分号。换句话说，如果当前语句和随后的非空格字符不能当成一个整体来解析的话，JavaScript 就在当前语句行结束处填补分号。

• 当出现一个不允许的行终止符或 } 时，会在其之前插入一个分号。

🌰 代码示例：

{ 1 2 } 3

// 将会被 ASI 转换为

{ 1 2 ;} 3;

当捕获到标识符输入流的结尾，并且无法将单个输入流转换为一个完整的程序时，将在结尾插入一个分号。

在下面这段中，由于在 b 和 ++ 之间出现了一个行终止符，所以 ++ 未被当成变量 b 的后置运算符。

🌰 代码示例：

a = b;

++c;

// 将被ASI转换为

a = b;

++c;

当语句中包含行终止符语法的时候（也就是语句后紧跟着换行），将会在行结尾插入一个分号。

带 这里没有行终止符 规则的语句有：

• 后置运算符（++ 和 --）
• continue
• break
• return
• yield、yield*
• module

return;

a + b;

// 将被 ASI 转换为

return;

a + b;

x;

++y;

// 解析为

x;

++y;

// 本意

x++;

y;

虽然分号不是必须的，但最好不要省略它，因为加上分号可以避免很多错误，代码行结尾处没有分号会导致压缩错误。加上分号也会在某些情况下增进代码的性能，因为这样解析器就不必再花时间推测应该在哪里插入分号了。