Web编译有33个警告- Expo react-native-web Drawer Navigator和重新动画的问题

zpf6vheq  于 2023-10-22  发布在  React
关注(0)|答案(1)|浏览(126)

我正在为所有平台(Web,Android,iOS)开发Expo和React Native项目,但一旦我将抽屉导航器添加到我的应用程序中,我就得到了这个错误,我已经包含了导入 “react-native-gesture-handler”; 进入顶部的入口点
在./node_modules/@react-navigation/drawer/lib/module/views/legacy/Overlay.js:11:4 export 'default'.'react-native-reanimated'中找不到'AnterThan'(导入为'Animated')(可能的导出:FlatList、Image、ScrollView、Text、View、addWhiteCoverdNativeProps、addWhiteCoverdUIProps、CoverAnimatedComponent)9|第二,10|丹,
11 |} =动画;|^ 12| 13 |const interpolate:类型interpolateNode = 14| interpolateNode??interpolateDeprecated;
任何帮助都将不胜感激我已经在这里呆了两天babel.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo',],
    plugins: ['@babel/plugin-transform-export-namespace-from','react-native-reanimated/plugin'],
  };
};

package.json

{
  "name": "react_native_carsec",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo-google-fonts/roboto": "^0.2.3",
    "@expo/vector-icons": "^13.0.0",
    "@expo/webpack-config": "^19.0.0",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-masked-view/masked-view": "0.2.9",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/drawer": "^6.6.3",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/stack": "^6.3.17",
    "@types/react-native": "^0.72.2",
    "babel-preset-expo": "^9.5.2",
    "expo": "~49.0.8",
    "expo-constants": "~14.4.2",
    "expo-linking": "~5.0.2",
    "expo-router": "2.0.0",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.4",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-web": "~0.19.6",
    "react-native-reanimated": "~3.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/plugin-transform-export-namespace-from": "^7.22.11",
    "@types/react": "~18.2.14",
    "typescript": "^5.1.3"
  },
  "private": true
}

我所尝试的:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
    '@babel/plugin-proposal-export-namespace-from',
    'react-native-reanimated/plugin',],
  
  };
};
//and tried that    

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo','module:metro-react-native-babel-preset'],
    plugins: ['@babel/plugin-transform-export-namespace-from','react-native-reanimated/plugin'],
  };
};

一旦我改变了密码,我就得到了那个错误
Uncaught TypeError: (0 , _nonSecure.nanoid) is not a function

c7rzv4ha

c7rzv4ha1#

经过长时间的艰苦搜索,我解决了这个问题,它只是与webpack插件有关,我已经将我的插件替换为针对react native构建和优化的metro插件。这里是https://docs.expo.dev/guides/customizing-metro/#web-support。
1-请确保您正确安装了抽屉导航器的这些依赖项,并按照这里的建议重新设置https://reactnavigation.org/docs/drawer-navigator/#props,并将必要的插件添加到babel.config.js文件中。
2-uninstall @expo/webpack-config .
3-添加到app.json文件

{
  "expo": {
    "web": {
      "bundler": "metro"
    }
  }
}

如果Web捆绑完成而没有警告,

相关问题