javascript - 在同一个 js 文件中使用 React 和 React Native 库

Question

我正在编写一个 React + Redux + ReactNative 应用程序，该应用程序为多个平台(Web、IOS、Android)共享相同的代码。

因此 UI 组件不同，但模型和逻辑在平台之间是共享的。

当我尝试在操作中导航到不同页面时遇到问题，例如:(我正在使用react-router和react-native-router-flux)

import {browserHistory} from "react-router";
import {Actions} from 'react-native-router-flux'; // This is the problematic import

export function signInSuccessAndRoute(user) {
    if (PlatformInfoShared.isWeb()) {
        const path = '/dashboard';
        browserHistory.push(path);
    } else {
        Actions.mainApplication();
    }
    return signInSuccess(user);
}

问题是，在网络上我收到此错误:

index.js:1Uncaught SyntaxError: 意外的 token 导入

我正在寻找一种作为 If 语句导入的方法，这意味着仅当平台是移动/Web 时才导入，这怎么可能？

或者您可能想到的任何其他选择...谢谢

Answer 1

不确定这是否有效，因为我没有在同一个应用程序中将 React Native 与 React 混合在一起(并且我不完全确定 React Native 将如何处理这些导入)，但这里有一个可能基于的想法代码分割的概念:

如果您使用的是 Webpack2，则可以使用 ES2015 的 System.import 来动态加载导入。

if (condition) {
  System.import('moduleName')
    .then(moduleName => {
      moduleName.methodName();
    });
}

如果您使用的是 Webpack1，require.ensure 可能会起作用。

if (condition) {
  require.ensure(['module-name', 'module-two'], () => {
    const ModuleName = require('module-name');
    const ModuleTwo = require('module-two');
    ModuleName.methodName();
  });
}

注意两者之间的用法差异。System.import 返回一个 promise 。Require.ensure 的第一个参数是模块名称数组，第二个参数是一个回调，您可以在其中使用 CommonJS require。请注意，回调不需要任何参数。

祝你好运!