React Native中如何传递URL查询参数？如何随fetch请求传参？是否可行？

嘿，这两个问题都是React Native开发里的高频场景，我来给你详细说说～

1. 在React Native开发场景下，如何传递URL查询参数？ #

分两种常见场景来处理，看你是构造API URL还是APP内页面跳转：

场景一：手动构造带查询参数的URL（比如调用API、处理深层链接） #

最稳妥的方式是用URLSearchParams，它会自动处理参数的URL编码，避免特殊字符导致的错误：

const params = new URLSearchParams();
params.append('userId', '123');
params.append('filter', 'active');
const fullUrl = `https://your-api.com/users?${params.toString()}`;
// 最终生成: https://your-api.com/users?userId=123&filter=active

要是你想手动拼接，记得一定要用encodeURIComponent()对参数值编码：

const userId = encodeURIComponent('123');
const filter = encodeURIComponent('active');
const fullUrl = `https://your-api.com/users?userId=${userId}&filter=${filter}`;

场景二：React Navigation路由间传递参数（APP内的“URL”跳转） #

如果用React Navigation做页面跳转，传递参数很简单：

跳转时传参：

navigation.navigate('UserProfile', {
  userId: '123',
  from: 'HomeScreen'
});

目标页面取参：

// 在UserProfile组件里
const { route } = useNavigation();
const { userId, from } = route.params || {};

要是你需要支持深层链接（比如外部APP打开你的RN页面），可以在导航配置里定义带参数的路径：

const linking = {
  prefixes: ['myapp://'],
  config: {
    screens: {
      UserProfile: 'user/:userId', // 路径参数
      Search: 'search?query=:query' // 查询参数
    }
  }
};

这样外部链接myapp://search?query=react打开时，就能在Search页面通过route.params.query拿到参数值。

2. 在React Native中，是否可以随fetch请求一同传递参数？当然可以！ #

fetch完全支持传递参数，主要分GET和POST两种请求方式处理：

GET请求传参 #

GET参数直接拼在URL里，还是推荐用URLSearchParams：

const fetchUsers = async () => {
  const params = new URLSearchParams();
  params.append('page', '1');
  params.append('limit', '10');
  
  try {
    const response = await fetch(`https://your-api.com/users?${params}`);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('请求失败:', error);
  }
};

POST请求传参 #

POST参数一般放在请求体里，常见两种格式：

格式一：JSON格式（最常用）

记得设置Content-Type: application/json请求头，把参数对象转成JSON字符串：

const createUser = async () => {
  const userData = {
    name: 'John Doe',
    email: 'john@example.com'
  };
  
  try {
    const response = await fetch('https://your-api.com/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        // 需要token的话可以加在这里：
        // 'Authorization': `Bearer ${yourAuthToken}`
      },
      body: JSON.stringify(userData)
    });
    const result = await response.json();
    console.log('用户创建成功:', result);
  } catch (error) {
    console.error('创建失败:', error);
  }
};

格式二：Form Data格式（上传文件/表单提交）

如果要传文件或者表单数据，用FormData对象：

const uploadAvatar = async (avatarUri) => {
  const formData = new FormData();
  formData.append('avatar', {
    uri: avatarUri,
    name: 'avatar.jpg',
    type: 'image/jpeg'
  });
  formData.append('userId', '123');
  
  try {
    const response = await fetch('https://your-api.com/upload-avatar', {
      method: 'POST',
      body: formData,
      // 不用手动设置Content-Type，fetch会自动生成
    });
    const result = await response.json();
    console.log('头像上传成功:', result);
  } catch (error) {
    console.error('上传失败:', error);
  }
};

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