意外的“typeof”；预期的 ”;”但找到了“选项”；预期为“来自”，但找到了“{”；

Question

我现在正在创建一个 vite React-Native 项目，但我不断收到错误：

X [ERROR] Unexpected "typeof"

    node_modules/react-native/index.js:14:7:
      14 │ import typeof AccessibilityInfo from './Libraries/Components/AccessibilityIn...
         ╵        ~~~~~~

X [ERROR] Expected ";" but found "Options"

    node_modules/react-native/Libraries/Utilities/codegenNativeComponent.js:19:5:
      19 │ type Options = $ReadOnly<{|
         │      ~~~~~~~
         ╵      ;

X [ERROR] Expected "from" but found "{"

    node_modules/react-native/Libraries/Renderer/shims/ReactNative.js:15:12:
      15 │ import type {ReactNativeType} from './ReactNativeTypes';
         │             ^
         ╵             from

X [ERROR] Expected "from" but found "{"

    node_modules/react-native/Libraries/Renderer/shims/ReactFabric.js:17:12:
      17 │ import type {ReactFabricType} from './ReactNativeTypes';
         │             ^
         ╵             from

X [ERROR] Expected "from" but found "{"

    node_modules/react-native/Libraries/Pressability/PressabilityDebug.js:11:12:
      11 │ import type {ColorValue} from '../StyleSheet/StyleSheet';
         │             ^
         ╵             from

我的App.jsx文件：

import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeScreen from './screens/HomeScreen';
import Page1 from './screens/Page1';
import Page2 from './screens/Page2';

const Drawer = createDrawerNavigator();

function DrawerNavigator() {
 return (
   <Drawer.Navigator initialRouteName="Home">
     <Drawer.Screen name="Home" component={HomeScreen} />
     <Drawer.Screen name="Page 1" component={Page1} />
     <Drawer.Screen name="Page 2" component={Page2} />
   </Drawer.Navigator>
 );
}

function App() {
 return <DrawerNavigator />;
}

export default App;

我的 vite.config.js 文件：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

我的package.json文件：

{
  "name": "vite-ionic-react",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@ionic/react": "^7.0.0-rc.5",
    "@ionic/react-router": "^7.0.0-rc.5",
    "@react-navigation/drawer": "^6.6.6",
    "@react-navigation/native": "^6.1.9",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-native": "^0.73.1",
    "react-native-safe-area-context": "^4.8.2",
    "react-router": "^6.21.1",
    "react-router-dom": "^6.21.1"
  },
  "devDependencies": {
    "@babel/core": "^7.23.6",
    "@babel/runtime": "^7.23.6",
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^8.55.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "vite": "^5.0.8"
  }
}

我已将我的 App.jsx 文件更改为此并且它可以工作，但我不知道如何实现抽屉而不给出错误：

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

是否有任何修复此错误的方法，或者有任何替代方案来反应导航抽屉？

Answer 1

我还没有通过 vite 创建 React Native 项目，但是抽屉导航需要更多的设置和包，并且您必须将整个应用程序包装在导航容器中。以下是一些有用的文档，请关注它们，看看它是否对您的案例有帮助。

• 反应导航（https://reactnavigation.org/docs/getting-started/）
• 抽屉导航器(https://reactnavigation.org/docs/drawer-navigator/)
• react-native-reanimated（https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/）