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

Question

Мы пытаемся использовать одни и те же компоненты React как в мобильном (реагирующий на родину), так и в веб (создать-реагирующее приложение).

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

Однако реагировать-нативно-векторные-иконки , которые мы широко используем в проекте реагирования-натива, не компилируется с react-native-web .Это означает, что любой компонент, который использует компонент с векторными значками, также нуждается в определенной веб-версии.Наличие веб-версий компонентов для поддержки эффектов.

Известен ли способ, без необходимости извлекать конфигурацию create-реагировать-приложение, иметь дело с третьими сторонами, такими как response-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 / реагирующие-скрипты .Не элегантно, но с глоточными часами, которые у нас есть в любом случае, мы можем убедиться, что конфигурация всегда там.

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

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

Answer 1

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

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

Мы создали веб-версию для каждого React Native Third Party.Для act-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-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) Расширьте реактивную нативную сеть (необязательно)

Если вы используете компоненты, которые Reaction-native-web пока не поддерживает, вам нужно собрать пакеты для них и расширить реагировать-родной-веб , чтобы ваша веб-версия работала.Просто создайте новый пакет @ yourcompany / Reaction-native-web и сгенерируйте index.js , в который импортируются компоненты, которые существуют в act-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;