我们能在React Native应用中使用Node.js代码吗？

Question

我希望在React Native项目中使用Node.js作为后端。

- Vinit Mehta

---

如果您打算构建一个 WebService，您可以做任何事情，因为您的应用程序及其后端将通过 http 进行通信。 - Hitmands

谢谢回复，请查看此链接（http://www.w3resource.com/node.js/nodejs-sqlite.php）。我想要完全相同的东西，但是在React Native中实现。 - Vinit Mehta

我不想为Web服务编写单独的代码，我想在React Native项目中使用Node.js代码。这是可能的吗？ - Vinit Mehta

Answer 1

ReactNativify Github 项目可以将 NodeJS 运行时添加到 React-Native（RN） 项目中，使其具备 NodeJS 功能。

*目前 在 RN v0.43.3 及以后版本中无法使用，截至 2017 年 4 月。

另请参见（截至 2018 年 5 月）：

• rn-nodeify
• nodejs-mobile-react-native

- Big Rich

---

nodejs-mobile-react-native似乎是目前最好的方法，它将一个nodejs运行时嵌入到React-Native应用程序中。 - Juanpa

Answer 2

是的，正如Big Rich所说，你可以使用用Node编写的包，通过使用ReactNativify。

但是需要考虑以下几点：

1）我按照问题列表中的建议，将transformer.js分成了两部分：

transformers.js （位于/config中并从rn-cli.config.js调用）

const babelTransformer = require('./babel-transformer');

module.exports.transform = function(src, filename, options) {

    const extension = String(filename.slice(filename.lastIndexOf('.')));
    let result;

    try {

    result = babelTransformer(src, filename);

    } catch (e) {

    throw new Error(e);
    return;
    }

    return {
    ast: result.ast,
    code: result.code,
    map: result.map,
    filename
    };
};

Babel转换器文件（也在/config目录下）：

'use strict'

const babel = require('babel-core');

/**
 * This is your `.babelrc` equivalent.
 */
const babelRC = {
    presets: ['react-native'],
    plugins: [

    // The following plugin will rewrite imports. Reimplementations of node
    // libraries such as `assert`, `buffer`, etc. will be picked up
    // automatically by the React Native packager.  All other built-in node
    // libraries get rewritten to their browserify counterpart.

    [require('babel-plugin-rewrite-require'), {
        aliases: {
            constants: 'constants-browserify',
            crypto: 'react-native-crypto',
            dns: 'mock/dns',
            domain: 'domain-browser',
            fs: 'mock/empty',
            http: 'stream-http',
            https: 'https-browserify',
            net: 'mock/net',
            os: 'os-browserify/browser',
            path: 'path-browserify',
            pbkdf2: 'react-native-pbkdf2-shim',
            process: 'process/browser',
            querystring: 'querystring-es3',
            stream: 'stream-browserify',
            _stream_duplex: 'readable-stream/duplex',
            _stream_passthrough: 'readable-stream/passthrough',
            _stream_readable: 'readable-stream/readable',
            _stream_transform: 'readable-stream/transform',
            _stream_writable: 'readable-stream/writable',
            sys: 'util',
            timers: 'timers-browserify',
            tls: 'mock/tls',
            tty: 'tty-browserify',
            vm: 'vm-browserify',
            zlib: 'browserify-zlib'
        },
        throwForNonStringLiteral: true
    }],

    // Instead of the above you could also do the rewriting like this:

    ["module-resolver", {
      "alias": {
        "mock": "./config/mock",
        "sodium-universal": "libsodium"
      }
    }]
    ]
};

module.exports = (src, filename) => {

    const babelConfig = Object.assign({}, babelRC, {
    filename,
    sourceFileName: filename
    });

    const result = babel.transform(src, babelConfig);
    return {
    ast: result.ast,
    code: result.code,
    map: result.map,
    filename
    };
}

2) 从上述代码可以看出，我还演示了使用babel-plugin-module-resolver插件。

请注意，我将使用此插件而不是ReactNative使用的插件。它允许您引用本地文件，并且使用正确的引号可以允许非JS兼容名称，如'sodium-universal'

请注意2 或者选择.babelrc解决方案（可能最干净的解决方案），如此评论中所述：https://github.com/philikon/ReactNativify/issues/4#issuecomment-312136794

3) 我发现我仍然需要在项目的根目录下添加一个.babelrc，以使我的Jest测试正常工作。有关详细信息，请参见此问题：https://github.com/philikon/ReactNativify/issues/8

- Arnold Schrijver

---

我尝试移植的软件包与NodeJS紧密相关，因此我现在正在研究另一种方法：在Android上将NodeJS编译为本地库。 - Arnold Schrijver

@ArnoldSchrijver 感谢您的总结，我尝试采用了您的方法，但是在 transform.js 中出现了 error: bundling failed: TypeError: Cannot read property 'slice' of undefined 错误。具体来说就是 const extension = String(filename.slice(filename.lastIndexOf('.'))); 这一行。有什么原因吗？ - S. Nas

不确定 @S.Nas 为什么你的 filename 是未定义的.. 可能是你代码中的问题，或者是 babel 的更改.. 恐怕我无法提供帮助。 - Arnold Schrijver