反应原生android应用程序以反应原生web应用程序

Question

我正在尝试将我的react原生android应用程序转换为react原生web应用程序。在这样做的时候，我在@react-native-picker\picker中得到了一个错误。

无法编译./node_modules/@react-native-picker/picker/js/Picker.web.js标记: C:\Users\User\Desktop\react-native\TestProject\node_modules@react-native-picker\picker\js\Picker.web.js: SyntaxError意外标记(9:12)

   7 | 
   8 | import React from 'react';
>  9 | import type {
     |             ^
  10 |   ViewStyleProp,
  11 |   TextStyleProp,
  12 | } from 'react-native/Libraries/StyleSheet/StyleSheet';

如何解决此问题？

Answer 1

看起来Picker.web.js包含使用Flow编写的代码，因此您需要确保您的web项目启用了对Flow的支持。

由于您使用的是创建React应用程序，因此您需要自定义配置以在node_modules中为包启用Babel

安装customize-cra和react-app-rewired的

npm install --save-dev customize-cra react-app-rewired 

按照以下步骤完成react-app-rewired的安装：https://github.com/timarney/react-app-rewired#how-to-rewire-your-create-react-app-project，

用于node_modules/@react-native-picker/picker的

1. 配置Babel包含

// config-overrides.js

const path = require('path');
const {
    babelInclude,
    override,
} = require('customize-cra');

module.exports = override(
    babelInclude([
        path.resolve('src'),
        path.resolve(__dirname, 'node_modules/@react-native-picker/picker'),
    ]),
);