React + React Native в том же проекте

Привет,

У меня есть проект для Интернета с использованием react и для нативного использования с react-native, и я поделился некоторым кодом.

react-native работает, но веб-версия не работает в той же кодовой базе, если я удалю код и библиотеки react-native, веб-версия будет работать.

Я думаю, что проблема в конфигурации webpack, я много пробовал версии, но не работает.

Для запуска сервера в Интернете я использую:

"webpack-dev-server --content-base dist/ --config webpack/web.dev.config.js --port 3000 --inline --hot --colors --historyApiFallback",

Мой файл конфигурации webpack:

const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const autoprefixer = require('autoprefixer')

const extractLess = new ExtractTextPlugin('css/style_webpack.css')

module.exports = {
  devtool: 'eval',
  entry: [path.resolve(__dirname, '../src/web/index')],
  cache: true,
  output: {
    path: path.join(__dirname, '../dist'),
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          plugins: [
            'transform-object-rest-spread',
            'transform-class-properties',
          ],
          presets: ['es2015', 'react', 'stage-0'],
        },
        include: path.resolve(__dirname, '../src')
      },
      {
        test: /\.less$/i,
        loader: extractLess.extract([
          {
            loader: 'raw-loader',
            options: {
              minimize: false,
              sourceMap: false,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: function() {
                return [autoprefixer('>1%', 'ie 10')]
              },
            },
          },
          {
            loader: 'less-loader',
            options: {
              strictMath: false,
              noIeCompat: true,
            },
          },
        ]),
      },
    ],
  },
  plugins: [
    extractLess,
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development'),
        PLATFORM_ENV: JSON.stringify('web'),
      },
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],
}

И ошибок, несколько из них:


        ERROR in ./~/react-native/Libraries/react-native/react-native-implementation.js
        Module not found: Error: Can't resolve 'AppRegistry' in 'E:\Proiecte\TransparentResidence\asociatie_frontend\node_modules\react-native\Libraries\react-native'
         @ ./~/react-native/Libraries/react-native/react-native-implementation.js 69:29-51
         @ ./src/native/routes/appNavigator.js
         @ ./src/reducers/nav/nav.js
         @ ./src/reducers/index.js
         @ ./src/configureStore.js
         @ ./src/web/index.js
         @ multi ./src/web/index

        ERROR in ./~/react-native/Libraries/react-native/react-native-implementation.js
        Module not found: Error: Can't resolve 'AppState' in 'E:\Proiecte\TransparentResidence\asociatie_frontend\node_modules\react-native\Libraries\react-native'
         @ ./~/react-native/Libraries/react-native/react-native-implementation.js 70:26-45
         @ ./src/native/routes/appNavigator.js
         @ ./src/reducers/nav/nav.js
         @ ./src/reducers/index.js
         @ ./src/configureStore.js
         @ ./src/web/index.js
         @ multi ./src/web/index

    ERROR in ./~/react-native-elements/src/searchbar/SearchBar.js
    Module parse failed: E:\Proiecte\TransparentResidence\asociatie_frontend\node_modules\react-native-elements\src\searchbar\SearchBar.js Unexpected token (14:8)
    You may need an appropriate loader to handle this file type.
    |
    | class SearchBar extends Component {
    |   focus = () => {
    |     this.searchbar.focus();
    |   };
     @ ./~/react-native-elements/src/index.js 16:0-46
     @ ./src/native/routes/appNavigator.js
     @ ./src/reducers/nav/nav.js
     @ ./src/reducers/index.js
     @ ./src/configureStore.js
     @ ./src/web/index.js
     @ multi ./src/web/index

    ERROR in ./~/react-native-elements/src/card/Card.js
    Module parse failed: E:\Proiecte\TransparentResidence\asociatie_frontend\node_modules\react-native-elements\src\card\Card.js Unexpected token (37:4)
    You may need an appropriate loader to handle this file type.
    |     fontFamily,
    |     imageProps,
    |     ...attributes
    |   } = props;
    |
     @ ./~/react-native-elements/src/index.js 24:0-31
     @ ./src/native/routes/appNavigator.js
     @ ./src/reducers/nav/nav.js
     @ ./src/reducers/index.js
     @ ./src/configureStore.js
     @ ./src/web/index.js
     @ multi ./src/web/index

    ERROR in ./~/react-native-elements/src/checkbox/CheckBox.js
    Module parse failed: E:\Proiecte\TransparentResidence\asociatie_frontend\node_modules\react-native-elements\src\checkbox\CheckBox.js Unexpected token (29:4)
    You may need an appropriate loader to handle this file type.
    |     checkedTitle,
    |     fontFamily,
    |     ...attributes
    |   } = props;
    |
     @ ./~/react-native-elements/src/index.js 18:0-43
     @ ./src/native/routes/appNavigator.js
     @ ./src/reducers/nav/nav.js
     @ ./src/reducers/index.js
     @ ./src/configureStore.js
     @ ./src/web/index.js
     @ multi ./src/web/index

Рассмотрите возможность использования github.com/necolas/react-native-web

Ivan Chernykh 10.05.2018 11:25

@Cherniv tank для предложения, для этого проекта не подходит, потому что веб-часть завершена на 99%, если я не найду решение, я разобью их.

aciobanita 10.05.2018 11:29

Я бы порекомендовал их разорвать. Я предполагаю, что код, которым вы делитесь, имеет отношение к логике, а не к рендерингу, это правильно? Если да, то почему бы не извлечь его в библиотеку? Таким образом, вы можете повторно использовать его в нескольких проектах.

mayk93 10.05.2018 11:35
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
3
504
2

Ответы 2

Вы не можете просто смешивать React и React Native (прочтите здесь, почему это так). Либо используйте React Native Web, как предлагал Чернов, либо полностью разделите код.

Если вы хотите сделать первое, см. это репо для примера 95% повторного использования кода.

Если вы используете один и тот же код в двух проектах, то связующим звеном является то, что вы используете ReactJS в обоих. Это означает, что вы можете взять код и создать общие классы Modular Service / Util, которые можно импортировать в оба.

Учтите следующее:

У меня есть пользовательский вызов api как в приложениях ReactJS, так и в React Native. Я создаю модуль User Service, который обрабатывает это за меня (написанный на JavaScript) с помощью только необходимого импорта ядра. Затем я импортирую эту службу в свои собственные приложения для реагирования и реагирования.

Зачем вам разбивать приложение? Вы разделили код, отделили общий код и разбили его на модули. Трудно сказать, не видя вашего кода.

Другие вопросы по теме