使用 react-native-web 在 create-react-app 中处理第 3 方

Question

我们正在尝试在移动端（react-native）和网页端（create-react-app）使用相同的 React 组件。

感谢react-native-web（下面的配置），到目前为止运行良好。

但是，我们在 react-native 项目中广泛使用的 react-native-vector-icons 不能使用 react-native-web 进行编译。这意味着任何使用带有矢量图标的组件的组件也需要特定的 Web 版本。拥有特定于 Web 的组件版本会影响维护。

有没有已知的方法，无需弹出 create-react-app 配置，来处理 web 中的 react-native-vector-icons 等第 3 方？

import {createIconSetFromIcoMoon} from "react-native-vector-icons";

import Font from './Font.json';
export default createIconSetFromIcoMoon(UbeyaFont);

到目前为止我们想到的事情： 我们目前正在研究两个想法：

• 基于环境的导入：

  # Pseudo code:
  # if mobile import this, otherwise import that.
  

  我们不确定这种动态导入是否可行

• Webpack 配置，被注入 node_modules/react-scripts。不优雅，但我们有一个 gulp watch，我们可以确保配置始终存在。

感谢任何想法或想法。

配置： 我们构建了一个新的私有 NPM 包，其中包含所有 React 组件，并通过使用 gulp watch 将包复制到移动和 Web 项目，我们省去了不断 npm 发布 和 yarning 在开发过程中（Webstorm 索引过程的唯一缺点）。

Answer 1

我们最终使用 gulp 脚本来覆盖 webpack。阶段是：

1) 构建替换包

我们为每个 React Native 3rd 方构建了一个网络版本。对于react-native-vector-icons，结果非常简单：

    import React from 'react';

    export const Icon = (props) => <div className="material-icons" 
                                        style={{color:props.color}}>
        {props.name}
    </div>;


    export default Icon;

2) 调整Webpack配置

使用 gulp 我们覆盖 create-react-app webpack 配置：

 resolve: {
        modules: ...
        alias: {
            "babel-runtime": path.dirname(
                require.resolve("babel-runtime/package.json")
            ),
            "react-native": "@ourcompany/react-native-web",
            "react-native-vector-icons": "@ourcompany/react-native-vector-icons",
   ...

gulp 任务脚本：

gulp.task("copyWebpack", function() {
    return gulp
        .src(["package.json", "src/_webpack/*.js"])
        .pipe(
            gulp.dest(
                path.resolve(pathWeb + "/node_modules/react-scripts/config")
            )
        );
});

注意：

• Ejecting create-react-app's configuration 更简洁，但这意味着您需要维护配置，我们更愿意保留配置并在构建过程中覆盖它。
• 您会注意到我们已经覆盖了 react-native-web 本身。在下一个可选步骤中了解更多信息。

3) 扩展 react-native-web（可选）

如果您正在使用 react-native-web 尚不支持的组件，您需要为它们构建包并扩展 react-native-web 以便您的 Web 版本可以正常工作。只需创建一个新包 @yourcompany/react-native-web 并生成一个 index.js，在其中导入 react-native-web 中确实存在的组件 并引用您构建的那些。请注意，当我们构建项目时 react-native-web 没有 FlatList 或 SectionList，而现在（2018 年 10 月）它同时拥有（Modal 仍然缺失 :-)）。

import {
    StyleSheet as _StyleSheet,
    View as _View,
    Text as _Text,
    Image as _Image,
    I18nManager as _I18nManager,
    AsyncStorage as _AsyncStorage,
    Platform as _Platform,
    Linking as _Linking,
    ActivityIndicator as _ActivityIndicator,
    ListView as _ListView,
    Modal as _Modal,
    Picker as _Picker,
    RefreshControl as _RefreshControl,
    TextInput as _TextInput,
    Touchable as _Touchable,
    TouchableHighlight as _TouchableHighlight,
    TouchableNativeFeedback as _TouchableNativeFeedback,
    TouchableOpacity as _TouchableOpacity,
    TouchableWithoutFeedback as _TouchableWithoutFeedback,
    Dimensions as _Dimensions,
    Animated as _Animated,
    ScrollView as _ScrollView,
    SafeAreaView as _SafeAreaView,
    BackHandler as _BackHandler,
    Switch as _Switch,
    NetInfo as _NetInfo,
    AppState as _AppState,

    ColorPropType as _ColorPropType,
} from 'react-native-web';

import {SectionList as _SectionList} from './SectionList';
import {FlatList as _FlatList} from './FlatList';
import {Alert as _Alert} from './Alert';
import {WebView as _WebView} from './WebView';
import {Share as _Share} from './Share';
import {PermissionsAndroid as _PermissionsAndroid} from './PermissionsAndroid';
import {ActionSheetIOS as _ActionSheetIOS} from './ActionSheetIOS';
import {ToastAndroid as _ToastAndroid} from './ToastAndroid';

export const StyleSheet = _StyleSheet;
export const View = _View;
export const Text = _Text;
export const Image = _Image;
export const I18nManager = _I18nManager;
export const AsyncStorage = _AsyncStorage;
export const Platform = _Platform;
export const Linking = _Linking;
export const ActivityIndicator = _ActivityIndicator;
export const ListView = _ListView;
export const Modal = _Modal;
export const Picker = _Picker;
export const RefreshControl = _RefreshControl;
export const TextInput = _TextInput;
export const Touchable = _Touchable;
export const TouchableHighlight = _TouchableHighlight;
export const TouchableNativeFeedback = _TouchableNativeFeedback;
export const TouchableOpacity = _TouchableOpacity;
export const TouchableWithoutFeedback = _TouchableWithoutFeedback;
export const Dimensions = _Dimensions;
export const Animated = _Animated;
export const ScrollView = _ScrollView;
export const SafeAreaView = _SafeAreaView;
export const BackHandler = _BackHandler;
export const Switch = _Switch;
export const NetInfo = _NetInfo;
export const AppState = _AppState;

export const Alert = _Alert;
export const Share = _Share;
export const WebView = _WebView;
export const PermissionsAndroid = _PermissionsAndroid;
export const ActionSheetIOS = _ActionSheetIOS;
export const ToastAndroid = _ToastAndroid;

export const SectionList = _SectionList;
export const FlatList = _FlatList;

export const ColorPropType = _ColorPropType;