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：1 Uncaught SyntaxError：意外的令牌导入

我正在寻找一种导入方式作为If语句，这意味着仅当平台是Mobile / 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。请注意，回调不需要任何参数。

祝你好运！

Answer 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});
    };
}

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

2 个答案: