React Native登录成功后跳转Dashboard及TouchableOpacity属性疑问

登录成功跳转Dashboard的实现方式 #

你当前的SigninPage组件已经从React Navigation的路由参数中获取到了navigation对象，只需要在登录流程的最后一步补充导航调用即可，同时注意修复几个细节问题：

• 等异步的本地存储操作全部完成后再触发导航，避免存储未完成就跳转导致鉴权状态异常
• 登录场景建议使用reset方法清空导航栈，避免用户跳转后按返回键又回到登录页

修改后的signIn函数参考实现：

const signIn = () => {
  // 前置空值校验
  if (!email.trim() || !password.trim()) {
    return;
  }
  login(email, password)
    .then((res) => {
      // 按需启用admin角色的登录拦截逻辑
      // if (res.data.role === 'admin') {
      //   throw new Error('管理员账号暂不支持该入口登录');
      // }
      // 等待所有本地存储操作完成
      return Promise.all([
        AsyncStorage.setItem('userData', JSON.stringify(res.data.dbResult[0])),
        AsyncStorage.setItem('userRole', res.data.role),
        AsyncStorage.setItem('userToken', res.data.token)
      ])
    })
    .then(() => {
      console.log('successfully logged!');
      // 重置导航栈，直接进入Dashboard页
      navigation.reset({
        index: 0,
        routes: [{ name: 'Dashboard' }]
      })
    })
    .catch((err) => {
      console.log('登录异常：', err);
    });
};

补充说明：只要你的导航配置中注册了名称为Dashboard的路由项，无论该页面是由栈导航、抽屉导航还是底部Tab导航承载，上述代码都可以正常完成跳转。

TouchableOpacity组件的value属性说明 #

TouchableOpacity是React Native提供的带触摸透明度反馈的按钮组件，官方定义的API中不存在value属性，你看到的这个属性提示属于IDE类型匹配的误报：

• 这类误报通常是因为IDE跨组件类型关联错误，把Web端表单控件、React Native其他输入类组件的通用属性提示匹配到了TouchableOpacity上
• 就算主动给TouchableOpacity传入value属性，组件内部也不会对这个属性做任何处理，不会产生实际运行效果，属于无效传参
• 你当前登录页的表单值完全可以通过作用域内的useState变量管理，不需要依赖组件的冗余属性传值。

内容的提问来源于stack exchange，提问作者Sanduni Fernando