非React Native开发者求教：如何在RN应用中集成外部JS文件？

嘿，完全没问题～ 你的这个加法函数是纯JavaScript逻辑，没有依赖浏览器专属的API（比如window、document），所以直接在React Native里用毫无压力。下面给你两种实用的实现方式，对应不同的场景：

方法一：将JS文件转为ES模块导入（推荐） #

如果可以修改原JS文件的代码，这是最规范的做法：

1. 把你的JS文件（比如命名为mathUtils.js）放到React Native项目的任意目录下，比如src/utils/。
2. 修改原JS文件，给函数加上导出语句，适配React Native的ES模块规范：

// src/utils/mathUtils.js
export function addition(number1, number2){
  var result = number1 + number2;
  return result;
}

3. 在你的React Native组件里导入并直接调用这个函数：

import React from 'react';
import { View, Text } from 'react-native';
// 根据你的文件实际路径调整导入路径
import { addition } from './src/utils/mathUtils';

export default function CalculatorScreen() {
  const sum = addition(10, 20); // 直接调用函数，得到30

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 20 }}>10 + 20 = {sum}</Text>
    </View>
  );
}

方法二：不修改原JS文件的兼容方案 #

如果因为某些原因不能修改原JS文件，你可以通过全局变量的方式间接调用：

1. 保持原JS文件不变（比如命名为originalMath.js）：

// originalMath.js
function addition(number1, number2){
  var result = number1 + number2;
  return result;
}

2. 创建一个包装模块（比如mathWrapper.js），把全局的函数导出：

// mathWrapper.js
// 加载原JS文件，此时函数会挂载到全局对象上
require('./originalMath.js');

// 导出全局的addition函数
export const addition = global.addition;

3. 之后在组件里导入包装模块的函数即可，用法和方法一完全一样。

注意事项 #

如果你的外部JS文件依赖了浏览器的专属API（比如操作DOM、使用localStorage的浏览器版本），那直接导入会报错，这时候可能需要用WebView来运行这段JS代码，但你的加法函数是纯计算逻辑，完全不需要担心这个问题～

内容的提问来源于stack exchange，提问作者Linto M