React Native创建新组件报错：已定义View却提示View未定义

问题 #

使用React Native 0.65.1开发组件时，已从react-native导入View组件，但运行时仍抛出**"View is not defined"**的引用错误。组件代码如下：

import React from 'react';
import { Text, View } from 'react-native';
import Styles from './Styles';
import CommonUtils from '../../components/base/CommonUtils';
import Constant from '../../constants/Constant';

class FrequentlyAskedQuestion extends React.Component {

  navigationOptions = (route, navigation) => {
    return CommonUtils.getBackNavigationHeader(route, navigation, Constant.HEADER_TITLE.FAQ, 1, false, true);
  };

  constructor(props) {
    super(props);
    this.state = {

    }
  }

  componentDidMount() {
    this.props.navigation.setOptions(this.navigationOptions(this.props.route, this.props.navigation));
  }

  render() {
    return (
      <View>
        <Text>
          asda
        </Text>
      </View>
    )
  }
}

export default FrequentlyAskedQuestion;

解决方案 #

针对这个问题，可按以下步骤排查修复：

1. 检查ESLint配置（若项目启用ESLint） #

如果项目使用ESLint做代码校验，可能是配置未识别React Native的全局组件。需在项目根目录的.eslintrc.js中添加React Native环境支持：

module.exports = {
  // 保留原有配置
  env: {
    // 新增以下配置
    'react-native/react-native': true
  },
  plugins: [
    // 新增插件
    'react-native'
  ]
};

同时确保已安装对应的ESLint插件：

npm install eslint-plugin-react-native --save-dev

2. 清除Metro缓存并重启服务 #

React Native的缓存可能导致模块导入异常，执行以下命令重置缓存并重启项目：

# 重置Metro缓存
npx react-native start --reset-cache

# 重新运行iOS项目
npx react-native run-ios
# 重新运行Android项目
npx react-native run-android

3. 验证导入语句正确性 #

确认import { Text, View } from 'react-native';中View的拼写完全正确（React Native组件名严格区分大小写，必须大写开头），没有遗漏或拼写错误。

4. 排查模块导入冲突 #

检查项目中是否存在其他文件或第三方模块导出同名的View组件，导致覆盖了React Native原生的View。可临时注释非必要的导入语句，逐步排查冲突来源。

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