在同一个 js 文件中同时使用 React 和 React Native 库答案

【问题标题】：Using both React and React Native libraries in the same js file在同一个 js 文件中同时使用 React 和 React Native 库
【发布时间】：2016-12-17 20:18:08
【问题描述】：

我正在编写一个 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: Unexpected token import

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

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

【问题讨论】：

我没有看到路由在行动中的原因。为什么不在发送动作的组件中导航？
@PaulS 在登录/刷新令牌等异步操作上，如果出错，我想导航到“/login”，成功时导航到“/app”。在我对使用 redux 进行路由的研究中，对操作使用导航是很常见的事情......
它是调用signInSuccessAndRoute 的单个组件，还是您有单独的Web/本机组件，每个组件都调用此函数？
分离组件，每个组件都调用此操作
@PaulS 你有什么建议？你有一个例子吗？重定向将通过应用程序状态进行，每次状态更改时都会重定向..不一定是重定向...我看不出不从动作中进行导航有什么意义...

标签： javascript reactjs react-native react-router react-native-router-flux

【解决方案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 返回一个承诺。 Require.ensure 的第一个参数是一个模块名称数组，它的第二个参数是一个回调，您可以在其中使用 CommonJS 要求。注意回调不需要任何参数。

祝你好运！

【讨论】：

感谢您的回答，但遗憾的是，ReactNative 无法使用这种导入运行...

【解决方案2】：

在尝试解决这个问题一段时间后，决定在此处记录，以防其他人遇到同样的问题。

我设法解决这个问题的最佳方法是创建一个自定义中间件，一个用于 Web 和移动设备的不同中间件，然后通过操作有效负载进行导航。

移动中间件：

import {Actions} from 'react-native-router-flux';

const ActionableNavigationMobile = store => next => action => {

    if ( ! action.redirect ) return next(action);

    const functionName = action.redirect;

    Actions[functionName]();

    return next(action);

};

export default ActionableNavigationMobile;

网络中间件：

import {browserHistory} from "react-router";

const ActionableNavigation = store => next => action => {

    if ( ! action.redirect ) return next(action);

    const path = action.redirect;
    browserHistory.push(path);

    return next(action);
};

export default ActionableNavigation;

添加为中间件：

export const store = createStore(
    reducer,
    applyMiddleware(thunk,actionableNavigation), //Change this for web and modile stors..
);

行动：

export function signInSuccessAndRoute(user) {
    return dispatch => {
        const redirect = PlatformInfoShared.isWeb() ? "/dashboard" : "mainApplication";
        dispatch(signInSuccess(user));
        dispatch({redirect: redirect});
    };
}

【讨论】：