react-native - 无法将 react native 线性梯度别名为 react native Web应用程序的 react native 网络线性梯度

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”在 Web 应用程序中无法工作。

注意:我的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 有一个填充，即“react-native-web-linear-gradient”。因此，据我所知，我只需安装该包并将原始 LinearLayout 别名为该包即可。

我已经安装了以下内容

• “react-native-web-线性梯度”:“1.1.1”
• “react-app-rewired”:“^2.1.6”，
• "customize-cra": "^1.0.0",

我的“config-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-线性梯度”别名为“react-native-web-线性梯度”。我的理解是所有进口都像

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

将转换为

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

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

但是我仍然遇到相同的错误，就像它没有使用别名一样。

我哪里做错了。

Answer 1

addWebpackAlias 未导入到配置中，您应该使用 custom-cra 的内置 override 并引用其 api网页包配置

/* 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 排除您不想转译的文件夹