Question

直升机，

我有一个使用react的网络项目和使用react-native的原生项目并分享一些代码。

react-native正在运行，但是如果我删除了网络版正在运行的react-native代码和库，那么网络版在同一代码库中不起作用。

我认为问题出在webpack配置上，我尝试了很多版本但是在snot工作中。

为了启动服务器，我使用：

"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

您不能简单地将React和React Native混合使用（为什么要读here）。按照Cherniv的建议使用React Native Web，或者将代码完全分开。

如果要使用前者，请参阅this repo，以获取95％的代码重用示例。

Answer 2

如果您要在两个项目之间共享相同的代码，那么连接词就是您在两个项目中都使用ReactJS。这意味着您可以获取代码并创建可以同时导入两者的通用Modular Service / Util类。

请考虑以下内容：

我在ReactJS和React Native应用程序中都进行了用户api调用。我创建了一个用户服务模块，该模块仅通过我需要的核心导入为我处理（用JavaScript编写）。然后，我将此服务导入我的React和React本机应用程序中。

为什么要分解您的应用程序？您已经共享了代码，分离了通用代码并将其模块化。没有看到您的代码，很难分辨。

React + React Native在同一个项目中

2 个答案: