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

Question

Helo,

У меня есть проект для веб-сайтов, использующий 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

Answer 1

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

Примите во внимание следующее:

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

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

Answer 2

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

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