Работа с третьими сторонами в приложении create-реакции-приложение с реагированием-native-web

Question

Мы пытаемся использовать одни и те же компоненты React как в мобильных (response-native), так и в веб (create-реагировать-приложение).

До сих пор это работает довольно хорошо благодаря response-native-web (конфигурация ниже).

Однако response-native-vector-icons, которые мы широко используем в проекте Reaction-native, не компилируется с response-native-web. Это означает, что любой компонент, который использует компонент с векторными значками, также нуждается в определенной веб-версии. Наличие определенных версий веб-компонентов обеспечивает обслуживание.

Есть ли известный способ, без необходимости извлекать конфигурацию создания-реагирования-приложения, для работы с третьими сторонами, такими как реагировать-нативные-векторные иконки в сети?

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.
  

  Мы не уверены, возможен ли такой динамический импорт

• Конфигурация веб-пакета, которая вставляется в node_modules / реагировать-скрипты. Не элегантно, но с глотком часов, которые у нас есть в любом случае, мы можем убедиться, что конфигурация всегда там.

Любые идеи или мысли приветствуются.

Конфигурация: Мы создали новый частный пакет NPM, который содержит все компоненты React, и, используя gulp watch, который копирует пакет как в мобильные, так и в веб-проекты, мы избавляемся от необходимости постоянно публиковать и загружать npm во время разработки (единственный недостаток Webstorm - процесс индексации).

Answer 1

В итоге мы использовали скрипт gulp для перезаписи веб-пакета. Этапы:

1) Сборка сменных пакетов

Мы создали веб-версию для каждой третьей стороны React Native. Для реакций-нативных векторных иконок это оказалось довольно просто:

    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 - Reaction -app следующим образом:

 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")
            )
        );
});

Замечания:

• Удаление конфигурации create-реагировать на приложение является более чистым, однако это означает, что вам нужно будет поддерживать конфигурацию, и мы предпочли оставить конфигурацию как есть и перезаписать ее во время процесса сборки.
• Вы могли заметить, что мы перезаписали саму реакцию-нативную сеть. Подробнее об этом в следующем необязательном шаге.

3) Расширить реактивную нативную сеть (опционально)

Если вы используете компоненты, которые реактив-native-web еще не поддерживает, вам следует создать пакеты для них и расширить реактив-native-web, чтобы ваша веб-версия работала. Просто создайте новый пакет @ yourcompany / react -native-web и сгенерируйте index.js, в который импортируются компоненты, которые существуют в Reaction-native-web, и ссылаются на созданные вами. Обратите внимание, что когда мы создавали наш проект response-native-web, у него не было FlatList или SectionList, а теперь (октябрь 2018 г.) они имеют оба (модальный по-прежнему отсутствует:-)).

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;