React-Native Demo 工程 TransformError babel-preset-react-native

本文解决了一个在使用React Native创建项目时出现的错误,该错误表现为bundling失败且未显示预期的欢迎界面。问题源于babel-preset-react-native版本不匹配,通过升级到指定版本可以解决。

一、问题

  1. 现象
    如果你依照RN官方文档或者RN中文网创建工程,你会遇到以下报错:
![bundling failed: "TransformError: /Users/eduardo/Desktop/rn_reproduce_transform_error/index.ios.js: Unexpected token ) (While processing preset: "/Users/eduardo/Desktop/rn_reproduce_transform_error/node_modules/babel-preset-react-native/index.js")"

而没有按照预期显示"Welcome to React Native!"界面。
2. 复现步骤

  • react-native init rn_reproduce_transform_error
  • cd rn_reproduce_transform_error
  • react-native run-ios or react-native run-android
  1. 环境
react-native-cli: 2.0.1
react-native: 0.47.1
node -v: v6.2.1
npm -v: 5.3.0
yarn -v: v0.27.5

二、原因

babel-preset-react-native版本不匹配

三、解决

  1. 执行以下命令行
// 如果安装了yern
yarn remove babel-preset-react-native
yarn add babel-preset-react-native@2.1.0

或者

// 如果安装了npm
npm uninstall babel-preset-react-native
npm install babel-preset-react-native@2.1.0
  1. 重启终端、模拟器。

四、参考

stackoverflow
react-native/issues/15513

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值