React Native如何从Node.js+Express+MySQL后端获取数据？

作为React Native新手，你熟悉的React、Node.js/Express/MySQL技术栈和RN的后端交互逻辑核心思路一致，但有几个关键细节需要注意：

核心异同点 #

相同之处 #

• 都支持原生fetch API或第三方库（比如axios）发起HTTP请求，请求逻辑（发起请求、处理响应、更新组件状态）完全相同。
• 复杂场景下的状态管理（Redux、Zustand等）用法和React基本一致。

不同之处 #

1. 网络权限配置：
   • React Native是原生APP，需要在平台配置文件中声明网络权限：
     • Android：在android/app/src/main/AndroidManifest.xml中添加<uses-permission android:name="android.permission.INTERNET" />
     • iOS：若使用HTTP请求（非HTTPS），需在ios/[项目名]/Info.plist中添加ATS例外配置（生产环境建议用HTTPS）。
2. 跨域问题：
   • React网页开发中本地调试需要处理跨域（比如配置代理），但React Native不存在浏览器的跨域限制，直接使用后端的IP/域名即可通信（只要设备和后端在同一局域网或后端公网可访问）。

具体实现示例 #

方法1：使用原生fetch API #

import { useState, useEffect } from 'react';
import { View, Text } from 'react-native';

const DataFetchComponent = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchBackendData = async () => {
      try {
        // 注意：替换为你的后端局域网IP/公网域名，不要用localhost
        const response = await fetch('http://192.168.1.105:3000/api/your-data-endpoint');
        if (!response.ok) {
          throw new Error(`请求失败：${response.status}`);
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchBackendData();
  }, []);

  if (loading) return <Text>加载中...</Text>;
  if (error) return <Text>错误：{error}</Text>;

  return (
    <View>
      {data.map((item, idx) => (
        <Text key={idx}>{item.title}</Text>
      ))}
    </View>
  );
};

export default DataFetchComponent;

方法2：使用axios（和React中用法几乎完全一致） #

先安装依赖：

npm install axios
# 或
yarn add axios

代码示例：

import { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';

const AxiosDataFetch = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('http://192.168.1.105:3000/api/your-data-endpoint');
        setData(response.data);
      } catch (err) {
        setError(err.response?.data?.msg || err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <Text>加载中...</Text>;
  if (error) return <Text>错误：{error}</Text>;

  return (
    <View>
      {data.map((item, idx) => (
        <Text key={idx}>{item.title}</Text>
      ))}
    </View>
  );
};

export default AxiosDataFetch;

关键注意事项 #

• 不要用localhost：模拟器/真机的localhost指向设备自身，无法访问电脑上的后端，需用电脑的局域网IP（Windows用ipconfig、Mac/Linux用ifconfig查看）。
• HTTPS证书：生产环境必须使用有效HTTPS证书，开发环境可临时关闭iOS/Android的证书验证。
• 错误处理：务必处理请求失败的情况（比如网络断开、后端报错），避免组件崩溃。

内容的提问来源于stack exchange，提问作者Hirdzan Rizki Rahman