无法将 react-native-linear-gradient 别名为 react-native-web-linear-gradient 以响应本机 Web 应用程序

Question

我有一个 react-native 应用程序，它有一个包含 LinearGradient 的屏幕，我正试图将其作为网络应用程序运行。

当我运行应用程序时出现以下错误。

./node_modules/react-native-linear-gradient/common.js
C:/myapp/node_modules/react-native-linear-gradient/common.js:6
  3 | import type { ElementProps } from 'react';
  4 | import { requireNativeComponent, View } from 'react-native';
  5 | 
> 6 | export default requireNativeComponent('BVLinearGradient');
  7 | 
  8 | export type Point = $Exact<{x: number, y: number}>;
  9 | type LinearGradientProps = {

如果没有 LinearGradient 组件，应用程序运行完全可以。 我认为问题在于“react-native-linear-gradient”在网络应用程序。

注意：我的react-native-web版本是“0.13.14”

App.js

import React from 'react';
import LinearGradient from 'react-native-linear-gradient';
import { StyleSheet, Text } from 'react-native';

const styles = StyleSheet.create({
  drawer: {
    flex: 1,
  },
});

const GRADIENT_COLORS = ['blue', 'white', 'black'];

export default class App extends React.Component {
  
  render() {
    
    return (
      <LinearGradient
        colors={GRADIENT_COLORS}
        style={styles.drawer}
      >
        <Text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum 
          erat in elit eleifend posuere. Cras interdum sagittis sem non consectetur. 
          Quisque nec faucibus odio. Phasellus ac ante felis. Nulla facilisis risus nulla, 
          eget interdum augue pellentesque id. Phasellus pellentesque augue eget porta 
          fringilla. Vivamus rhoncus scelerisque libero sit amet ullamcorper. Vestibulum 
          sit amet est ultrices, tristique risus vitae, aliquet ligula. Ut bibendum dignissim 
          tincidunt. In et tortor ullamcorper, dapibus arcu a, pellentesque velit. Praesent 
          ornare metus dapibus, tincidunt nulla in, maximus nisl. Ut molestie aliquam mi, 
          ac molestie purus sagittis eget. Aliquam sit amet lacus quis risus convallis semper.
        </Text>
      </LinearGradient>
    );
  }
}

我看到有一个 LinearLayout 的 polyfill，即“react-native-web-linear-gradient”。因此，据我所知，我只是安装了那个包并将原始的 LinearLayout 别名为这个包。

我已经安装了以下

"react-native-web-linear-gradient": "1.1.1"
"react-app-rewired": "^2.1.6",
"customize-cra": "^1.0.0",

我的“配置-overrides.js”是：

const {addWebpackAlias} = require('customize-cra');

module.exports = function override(config, env) {
  config.module.rules.push(
    {
      test: /\.js$/,
      exclude: /node_modules\/(?!()\/).*/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
          plugins: ['@babel/plugin-proposal-class-properties'],
        },
      },
    },
  );

  addWebpackAlias({
    'react-native-linear-gradient': 'react-native-web-linear-gradient',
  });

  return config;
};

这里我将 'react-native-linear-gradient' 别名为 'react-native-web-linear-gradient'。我的理解是所有导入都像

import LinearGradient from 'react-native-linear-gradient';

将转换为

import LinearGradient from 'react-native-web-linear-gradient';

在构建网络应用程序时通过 webpack。

但是我仍然遇到同样的错误，比如它没有使用别名。

我哪里错了

Answer 1

addWebpackAlias没有导入到config中，你应该使用custom-cra的build-in override并参考其api进行webpack配置

/* config-overrides.js */
const {
  override,
  addWebpackAlias,
  addBabelPlugins,
  addBabelPresets,
  babelExclude,
  path,
} = require('customize-cra');

module.exports = override(
  babelExclude([path.resolve("node_modules")]),
  ...addBabelPlugins('@babel/plugin-proposal-class-properties'),
  ...addBabelPresets('@babel/preset-env', '@babel/preset-react'),
  addWebpackAlias({
    'react-native-linear-gradient': 'react-native-web-linear-gradient',
  }),
);

编辑：您可以使用babelExclude排除您不想转译的文件夹

无法将 react-native-linear-gradient 别名为 react-native-web-linear-gradient 以响应本机 Web 应用程序

Failing to alias react-native-linear-gradient to react-native-web-linear-gradient for react native web app

react-native

react-native-web