为了学习react native,我正在用typescript构建一个react native应用程序.一旦我用expo start运行应用程序并try 在emulator上运行,我会出现以下错误:

指数js: [BABEL] ......../指数js: Unknown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options

事实上我以前没有这个错误.我试图安装react-native-dotenv软件包,同时也安装了metro-react-native-babel-preset,我不确定是否已经安装了metro-react-native-babel-preset.

我的Package.json如下所示:

{
 "name": "mobile-app",
 "version": "0.0.1",
 "private": true,
 "scripts": {
   "android": "react-native run-android",
   "ios": "react-native run-ios",
   "start": "react-native start",
   "test": "jest",
   "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
 },
 "dependencies": {
   "@react-native-community/async-storage": "^1.12.0",
   "@react-native-community/google-signin": "^4.0.3",
   "@types/axios": "^0.14.0",
   "axios": "^0.20.0",
   "expo": "^38.0.10",
   "react": "16.13.1",
   "react-native": "0.62.2"
 },
 "devDependencies": {
   "@babel/core": "^7.8.4",
   "@babel/runtime": "^7.8.4",
   "@react-native-community/eslint-config": "^1.1.0",
   "@types/jest": "^25.2.3",
   "@types/react-native": "^0.63.2",
   "@types/react-native-dotenv": "^0.2.0",
   "@types/react-test-renderer": "^16.9.2",
   "@typescript-eslint/eslint-plugin": "^2.27.0",
   "@typescript-eslint/parser": "^2.27.0",
   "babel-jest": "^25.1.0",
   "eslint": "^6.5.1",
   "jest": "^25.1.0",
   "react-native-clean-project": "^3.4.0",
   "react-native-dotenv": "^2.4.1",
   "react-test-renderer": "16.13.1",
   "typescript": "^3.8.3"
 },
 "jest": {
   "preset": "react-native",
   "moduleFileExtensions": [
     "ts",
     "tsx",
     "js",
     "jsx",
     "json",
     "node"
   ]
 }
}

巴贝尔.配置.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset', 'module:react-native-dotenv'],
};

指数js

/**
 * @format
 */

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent('main', () => App);

推荐答案

事实证明,这个问题与react-native-dotenv种设置有关.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ["module:react-native-dotenv", {
      "moduleName": "@env",
      "path": ".env",
      "blacklist": null,
      "whitelist": null,
      "safe": false,
      "allowUndefined": true
    }]
  ]
};

还将导入语句更改为:

Credit for the solution:
https://github.com/facebook/react-native/issues/29314
Solution:
https://github.com/goatandsheep/react-native-dotenv/wiki/Migration-Guide

React-native相关问答推荐

Appcenter构建失败错误号::EEXIST -文件存在于syserr_fail2_in

React Native 中的视图与 Flex 不占用相同的高度空间

在 React Native Paper 中更改 TextInput 的文本 colored颜色

为了回调 URL 的目的,在 Expo 中运行的 React Native 元素的 info.plist 在哪里?

为 React Native TextInput 创建 ref 时出现 TypeScript 问题

使用 react-native 单击时如何更改图像和文本 colored颜色 ?

使用 resizeMode = contain时的图像对齐

React-Native Packager 失败:重复的模块名称

React-Native iOS - 如何通过按下按钮从 React-Native 视图导航到非 React-Native 视图(本机 iOS 视图控制器)?

通过带有对象子对象的数组react native 映射 - 与react网络中的工作方式不同?

元素中缺少main.jsbundle、Foundation和Security,导致报错

如何渲染多行文本组件,行间有白色间隙

如何从 React Native-App 中的 res/drawable-folder 加载图像?

在本react-native中具有异步和等待的箭头函数

有react-native复选框的例子吗?

等待模块失效的超时

您将如何在 Alert 中模拟onPress?

如何在 React Native 中重复图案图像以创建背景?

React Native Build Error on IOS - typedef 用不同类型重新定义('uint8_t'(又名'unsigned char')与'enum clockid_t')

React-Native 最低 Android API 级别