Question

我们正在尝试在移动（反应原生）和网络（create-react-app）中使用相同的React组件。

到目前为止，由于react-native-web（下面的配置），它的工作进展顺利。

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

有没有一种已知的方法，无需弹出create-react-app配置，来处理第三方，例如网络中的 react-native-vector-icons ？

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手表，我们可以确保配置始终在那里。

感谢任何想法或想法。

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

Answer 1

我们最终使用了Gulp脚本来覆盖Webpack。这些阶段是：

1）构建替换软件包

我们为每个 React Native 3rd party构建了一个网络版本。对于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月）它同时拥有这两者（模态仍然缺失：-））。

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;

使用react-native-web处理create-react-app中的第三方

1 个答案: