React Native中View无法作为JSX组件使用的问题求助

问题详情 #

报错信息：'View' cannot be used as a JSX component. Its instance type 'View' is not a valid JSX element
推测问题源于依赖库版本不兼容或类型定义冲突，相关代码如下：

import React from 'react';

import {View,Text,StyleSheet, Button} from 'react-native'

import {createSwitchNavigator} from 'react-navigation'

const styles = StyleSheet.create({
  txt:{
    fontSize: 48
  },
  view: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  }
})

class screenComponent1 extends React.Component {
  render() {
    return(
      
      <View>
        <Button onPress={() => this.props.navigation.navigate('screenroute2')} title='next page'/>
      </View>
    )
  }
}
class screenComponent2 extends React.Component {
  render() {
    return(
      <View>
        <Button onPress={() => this.props.navigation.navigate('screenroute1')} title='next page'/>
      </View>
    )
  }
}

const AppNavigator = createSwitchNavigator({
  screenroute1: screenComponent1,
  screenroute2: screenComponent2,
})


export default class App extends React.Component {
  render() {
    return <AppNavigator/>
  }
}

解决方案 #

1. 对齐React与React Native的类型定义版本 #

TypeScript类型不匹配是这类错误的常见原因，确保@types/react和@types/react-native的版本与你项目中react、react-native的实际版本完全对应：

• 查看项目依赖版本：

  npm list react react-native @types/react @types/react-native
  

• 安装匹配的类型包：

  # 替换成你对应的版本号，比如react 18.2.0对应@types/react@18.2.0
  npm install @types/react@x.x.x @types/react-native@x.x.x --save-dev
  # yarn用户
  yarn add @types/react@x.x.x @types/react-native@x.x.x --dev
  

2. 升级React Navigation到最新稳定版 #

你使用的createSwitchNavigator来自旧版react-navigation，该包已被废弃，且与新版React/React Native存在类型冲突：

• 卸载旧版依赖：

  npm uninstall react-navigation
  # yarn用户
  yarn remove react-navigation
  

• 安装新版React Navigation核心包及栈导航器：

  npm install @react-navigation/native @react-navigation/native-stack
  npm install react-native-screens react-native-safe-area-context
  # yarn用户
  yarn add @react-navigation/native @react-navigation/native-stack
  yarn add react-native-screens react-native-safe-area-context
  

• 修改代码适配新版API：

  import React from 'react';
  import {View, Button} from 'react-native';
  import {NavigationContainer} from '@react-navigation/native';
  import {createNativeStackNavigator} from '@react-navigation/native-stack';
  
  const Stack = createNativeStackNavigator();
  
  class ScreenComponent1 extends React.Component {
    render() {
      return(
        <View>
          <Button onPress={() => this.props.navigation.navigate('screenroute2')} title='next page'/>
        </View>
      )
    }
  }
  
  class ScreenComponent2 extends React.Component {
    render() {
      return(
        <View>
          <Button onPress={() => this.props.navigation.navigate('screenroute1')} title='next page'/>
        </View>
      )
    }
  }
  
  export default class App extends React.Component {
    render() {
      return (
        <NavigationContainer>
          <Stack.Navigator initialRouteName="screenroute1">
            <Stack.Screen name="screenroute1" component={ScreenComponent1} />
            <Stack.Screen name="screenroute2" component={ScreenComponent2} />
          </Stack.Navigator>
        </NavigationContainer>
      )
    }
  }
  

3. 清除缓存并重启项目 #

依赖更新后清除缓存避免残留问题：

• 删除依赖文件夹与锁文件：

  rm -rf node_modules package-lock.json yarn.lock
  npm install # 或yarn install
  

• 重置Metro缓存：

  npx react-native start --reset-cache
  

• 重启模拟器/真机上的应用

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