React Native 中的环境变量配置与网络请求封装
环境变量管理
在移动应用开发中，接口地址通常通过环境变量进行管理，以便在不同环境下（如开发、测试、生产）灵活切换。对于使用 Expo 构建的 React Native 项目，支持通过 .env 文件定义环境变量。
在项目根目录创建 .env 文件，并添加如下内容：
EXPO_PUBLIC_API_URL=http://localhost:3000若需在真机或局域网设备上调试，请将地址替换为本机 IP：
EXPO_PUBLIC_API_URL=http://192.168.x.xx:3000注意：Expo 要求所有环境变量必须以 EXPO_PUBLIC_ 开头且全大写命名，否则无法读取。
URL 拼接工具：urlcat
为简化 URL 构造过程，推荐安装 urlcat 库：
npm install urlcat该库可自动处理路径拼接和查询参数序列化，避免手动处理 ? 和 & 的复杂逻辑。例如：
urlcat('http://localhost:3000', '/users', { page: 1, limit: 20 })会生成：
http://localhost:3000/users?page=1&limit=20统一请求封装
基于 fetch 和 urlcat，可构建一个通用的 HTTP 客户端，提升代码复用性和可维护性。
import urlcat from 'urlcat';
const request = async (path, { method = 'GET', params, data } = {}) => {
const baseUrl = process.env.EXPO_PUBLIC_API_URL;
const fullUrl = urlcat(baseUrl, path, params);
const headers = {
Accept: 'application/json',
'Content-Type': 'application/json',
// 后续可用于注入认证 token
};
const config = {
method,
headers,
...(data && { body: JSON.stringify(data) })
};
const response = await fetch(fullUrl, config);
if (!response.ok) {
let errorMessage = '请求失败';
let errorData = null;
try {
errorData = await response.json();
errorMessage = errorData.message || errorMessage;
} catch (e) {}
const error = new Error(errorMessage);
error.status = response.status;
error.response = errorData;
throw error;
}
return await response.json();
};
// 快捷方法导出
export const get = (url, params) => request(url, { method: 'GET', params });
export const post = (url, data) => request(url, { method: 'POST', data });
export const put = (url, data) => request(url, { method: 'PUT', data });
export const patch = (url, data) => request(url, { method: 'PATCH', data });
export const del = (url) => request(url, { method: 'DELETE' });
export default request;
实际调用示例
const result = await get('/search', { q: 'react native' });
避免 useEffect 无限循环
当在 useEffect 中依赖对象类型参数（如 params）时，即使内容未变，引用变化也会触发重复执行。可通过字符串化解决：
useEffect(() => {
fetchData();
}, [url, JSON.stringify(params)]);
此方式确保仅当参数内容真正改变时才重新触发请求。
