React-Navigation DrawerNavigator安卓性能异常问题咨询

嘿，我来帮你拆解这个DrawerNavigator卡顿的问题！

你在componentDidMount里调用的bcrypt.genSaltSync()和bcrypt.hashSync()都是同步执行的方法，它们会直接卡住JavaScript主线程。而React Native的UI渲染、Drawer的滑动交互这些核心操作全依赖主线程，一旦主线程被长时间占用，安卓端自然会出现卡顿、响应异常的情况——这就是问题的根源。

而且componentDidMount是组件刚挂载完成就执行的，这时候主线程本来就要处理页面渲染和导航初始化的工作，再加上同步加密的耗时操作，直接拖慢了整个进程的响应速度。

bcrypt本身提供了异步版本的方法，不会阻塞主线程，你可以把代码改成下面这样：

回调写法 #

componentDidMount(){ 
  bcrypt.genSalt(10, (err, salt) => {
    if (err) {
      // 这里处理生成盐值的错误
      console.error('生成盐值失败:', err);
      return;
    }
    bcrypt.hash("StrToHash", salt, (err, hash) => {
      if (err) {
        // 处理哈希生成的错误
        console.error('生成哈希失败:', err);
        return;
      }
      // 拿到hash后执行你的后续逻辑
      console.log('生成的哈希值:', hash);
    });
  }); 
}

Promise/async-await写法（更简洁） #

如果你的bcrypt版本支持Promise，用async-await会更易读：

async componentDidMount(){ 
  try {
    const salt = await bcrypt.genSalt(10);
    const hash = await bcrypt.hash("StrToHash", salt);
    // 在这里处理生成好的hash
    console.log('生成的哈希值:', hash);
  } catch (err) {
    // 统一捕获并处理错误
    console.error('加密过程出错:', err);
  }
}

• 如果这个加密操作不是必须在组件挂载时立刻执行，可以考虑把它延迟到用户触发某个操作（比如点击按钮）之后再执行，这样就完全不会影响页面初始化和Drawer的流畅度了。
• 在React Native里，所有耗时的计算、IO操作都尽量用异步方法，避免阻塞主线程——这是保证UI流畅的核心原则之一。

内容的提问来源于stack exchange，提问作者J-Barbe