React-Native Demo 工程 TransformEr

一、问题

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

3. 环境

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

2. 重启终端、模拟器。

四、参考
stackoverflow
react-native/issues/15513