在同一个 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);
}

问题是，我在 Web 上收到此错误：

index.js:1Uncaught 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 returns 一个承诺。 Require.ensure 的第一个参数是一个模块名称数组，第二个参数是一个回调，您可以在其中使用 CommonJS 要求。注意回调不需要任何参数。

祝你好运！

Answer 2

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

我设法解决这个问题的最好方法是创建一个自定义中间区域，一个用于网络和移动设备的不同中间区域，然后按操作负载导航。

移动中间件：

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 库

Using both React and React Native libraries in the same js file

javascript

reactjs

react-router

react-native

react-native-router-flux