React Native if语句内返回的<View>组件无法渲染问题求解

问题根因 #

onPress 是React Native的事件处理回调，回调函数内部返回的JSX不会被自动插入到组件的渲染树中，这是React框架的基础渲染逻辑，不属于语法错误因此不会抛出报错。

解决步骤 #

• 第一步：在当前登录页组件内声明状态变量，用来控制错误视图的显隐：

import { useState } from 'react';
// 组件内部代码
const [showEmailError, setShowEmailError] = useState(false);

• 第二步：修改登录提交函数的校验逻辑，校验不通过时更新状态而非返回JSX：

function submit_Login(val, val1, nav) {
  const emailLength = val.length;
  const pwdLength = val1.length;
  if (emailLength <= 15) {
    alert('Invalid Email');
    setShowEmailError(true);
    return;
  }
  if (pwdLength <= 5) {
    alert('Invalid Password');
    return;
  }
  nav.navigate('Main');
}

• 第三步：将需要渲染的红色错误视图放到组件的渲染返回结构中，通过状态控制显隐：

// 组件render返回的JSX结构内
return (
  <View>
    {/* 原有页面的其他UI内容 */}
    {/* 邮箱错误提示视图 */}
    {showEmailError && <View style={{ width: 50000, height: 50000, backgroundColor: 'red' }}></View>}
    <View style={{ marginBottom: 10, width: "80%", marginLeft: '10%', marginTop: '-8%' }}>
      <Button
       title="Login"
       onPress={() => submit_Login(value, value1, navigation)}
      />
    </View>
  </View>
)

补充说明 #

你当前写的错误视图宽高设置为50000，远大于普通移动设备的屏幕尺寸，实际使用时建议调整为合理尺寸，避免超出视口导致看不见效果。另外注意你原代码中函数名sumbit、错误提示Invaild都存在拼写错误，建议修正避免后续出现隐性问题。

内容的提问来源于stack exchange，提问作者Anas Hs