时间戳

首页 > 解决方案 > 使用 Create React Native App 和 Expo 在 React Native 的构建时自定义代码

react-native - 使用 Create React Native App 和 Expo 在 React Native 的构建时自定义代码

问题描述

一般来说，有没有办法在构建步骤中自定义应用程序代码？

具体来说，通常需要从应用程序向本地后端（[1]、[2]、[3]、[4]）发出请求。

使用 Webpack 可以解决类似的情况，使用DefinePlugin将占位符替换为正在构建的机器的 IP 地址。

标签： react-nativeexpocreate-react-native-app

解决方案

我们最终使用了受变形金刚react-native-typescript-transformer或react-native-sass-transformer. 它的想法几乎等同于提到DefinePlugin的Webpack。

首先，项目目录中的一些转换器文件（您可以随意命名它们，只需更新引用即可）：

configBuildReplacements.js

// whatever logic you need

module.exports = {
    API_HOST_PLACEHOLDER: `http://${getLocalNetworkAddress()}:3000`,
    SOME_OTHER_DYNAMIC_VALUE: someFun(),
}

configBuildReplaceTransformer.js

const semver = require('semver')    

let upstreamTransformer = null

const reactNativeVersionString = require('react-native/package.json').version
const reactNativeMinorVersion = semver(reactNativeVersionString).minor

if (reactNativeMinorVersion >= 56) {
    upstreamTransformer = require('metro/src/reactNativeTransformer')
}
else if (reactNativeMinorVersion >= 52) {
    upstreamTransformer = require('metro/src/transformer')
}
else if (reactNativeMinorVersion >= 47) {
    upstreamTransformer = require('metro-bundler/src/transformer')
}
else if (reactNativeMinorVersion === 46) {
    upstreamTransformer = require('metro-bundler/build/transformer')
}
else {
    // handle RN <= 0.45
    const oldUpstreamTransformer = require('react-native/packager/transformer')
    upstreamTransformer = {
        transform({ src, filename, options }) {
            return oldUpstreamTransformer.transform(src, filename, options)
        },
    }
}


module.exports.transform = function (src, filename, options) {
    // handle RN >= 0.46
    if (typeof src === 'object') {
        ({ src, filename, options } = src)
    }

    const replacements = require('./configBuildReplacements')

    const modifiedSrc = Object.keys(replacements).reduce(
        (src, replacementKey) => src.replace(
            new RegExp(replacementKey, 'g'),
            replacements[replacementKey],
        ),
        src,
    )

    return upstreamTransformer.transform({
        src: modifiedSrc,
        filename,
        options,
    })
}

导出transform函数使用从前一个文件中导出的对象configBuildReplacements.js作为字典，将源代码中的键子字符串替换为值子字符串，然后将此代码交给默认（上游）转换器。

并将这个新变压器连接到项目：

  • 使用 Expo，将transformer打包程序选项添加到app.json：

    {
  "expo": {
    "packagerOpts": {
      "transformer": "configBuildReplaceTransformer.js"
    }
  }
}

  • 在没有 Expo 的情况下，添加getTransformModulePath()到rn-cli.config.js（这是 React Native CLI 的可选配置文件的默认路径，在撰写本文时该文件的文档非常少）：

    module.exports = {
    getTransformModulePath() {
        return require.resolve('./configBuildReplaceTransformer')
    },        
}

完成后，就像 with 一样DefinePlugin，代码如下

get('API_HOST_PLACEHOLDER/info')

会变成类似的东西

get('http://192.168.42.23:3000/info')

推荐阅读