React Native新手连接PostgreSQL时导入pg模块遇打包解析错误求助

嘿，我完全懂你现在的困扰——直接在React Native项目里用pg模块是走不通的，这不是你导入语法的问题，而是环境不兼容导致的：

pg这个模块是专门为Node.js后端环境开发的，它依赖Node.js的核心内置模块（比如net、tls这类网络相关的API），但React Native的移动端运行环境（iOS/Android的JavaScript引擎）并没有这些Node.js专属的模块支持，所以打包工具根本找不到这些依赖，就抛出了“无法解析模块”的错误。

而且退一步说，就算能导入，直接在移动端应用里连接PostgreSQL也存在严重的安全问题：你得把数据库的用户名、密码硬编码在前端代码里，很容易被反编译获取，直接暴露你的数据库风险。

正确的解决方案：通过后端API中转 #

正确的做法是搭建一个简单的Node.js后端服务，让后端来负责连接PostgreSQL，然后React Native通过HTTP请求（比如fetch或axios）调用后端提供的接口来操作数据库。

步骤1：搭建Node.js后端服务

1. 新建一个后端项目文件夹，初始化npm：

   mkdir rn-postgres-backend && cd rn-postgres-backend
   npm init -y
   

2. 安装依赖：

   npm install express pg cors
   

3. 创建server.js文件，写一个简单的接口示例：

   const express = require('express');
   const { Pool } = require('pg');
   const cors = require('cors');
   
   const app = express();
   app.use(cors());
   app.use(express.json());
   
   // 配置PostgreSQL连接池
   const pool = new Pool({
     user: '你的数据库用户名',
     host: '你的数据库地址',
     database: '你的数据库名',
     password: '你的数据库密码',
     port: 5432, // PostgreSQL默认端口
   });
   
   // 示例接口：获取数据
   app.get('/api/data', async (req, res) => {
     try {
       const result = await pool.query('SELECT * FROM 你的表名');
       res.json(result.rows);
     } catch (err) {
       console.error(err);
       res.status(500).json({ error: '获取数据失败' });
     }
   });
   
   const PORT = 3000;
   app.listen(PORT, () => {
     console.log(`后端服务运行在 http://localhost:${PORT}`);
   });
   

4. 启动后端服务：

   node server.js
   

步骤2：在React Native中调用后端接口

1. （可选）安装axios（也可以用React Native内置的fetch）：

   npm install axios --save
   

2. 在你的App.js里调用接口：

   import React, { useEffect, useState } from 'react';
   import { View, Text, FlatList } from 'react-native';
   import axios from 'axios';
   
   const App = () => {
     const [data, setData] = useState([]);
     const [loading, setLoading] = useState(true);
   
     useEffect(() => {
       // 注意：如果是真机测试，要把localhost换成你的电脑IP地址
       axios.get('http://localhost:3000/api/data')
         .then(response => {
           setData(response.data);
           setLoading(false);
         })
         .catch(error => {
           console.error('请求失败:', error);
           setLoading(false);
         });
     }, []);
   
     if (loading) {
       return <View><Text>加载中...</Text></View>;
     }
   
     return (
       <View>
         <FlatList
           data={data}
           keyExtractor={(item) => item.id.toString()}
           renderItem={({ item }) => (
             <Text>{item.name}</Text> {/* 替换成你的表字段 */}
           )}
         />
       </View>
     );
   };
   
   export default App;
   

额外注意事项 #

• 如果用真机测试，要把后端接口的localhost换成你电脑的局域网IP地址（比如http://192.168.1.100:3000/api/data），并且确保手机和电脑在同一个局域网下。
• 生产环境中，记得给后端接口加上身份验证（比如JWT），避免非法请求。

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