如何在 react-native 中从前端发出 Post 请求？

POST 方法用于向服务器发送数据以创建新资源或修改服务器上的现有资源。我们不能使用网络浏览器发出 POST 请求，因为网络浏览器只直接支持 GET 请求。

但是，如果我们想要开发一个应用程序，我们需要在用户从 UI 端单击按钮时向后端添加一些数据或修改现有数据，该怎么办？在这种情况下，我们必须从前端发出一个 post 请求（例如：点击一个按钮）

出于学习目的，我们通常使用 Advanced Rest Client 或 Postman 等工具来创建或添加新数据。

通常，每当从浏览器触发 API 时，都会发送 GET 请求并获取数据。

先决条件：

ReactJS 的基础知识。
具有 ES6 语法的 Html、CSS 和 javascript。
HTTP方法基础知识
NodeJs 应该安装在您的系统中。
用于在模拟器上测试您的应用的 Jdk 和 android studio

方法：在本文中，我们将看到如何在 React Native 中发出 post 请求。我们将在单击按钮时使用 fetch 方法触发 API，在从该 API 获得响应后，我们将显示一条警报消息。要在 react -native 中从 UI 端触发 Post 请求，我们可以将 Request 选项作为第二个参数发送。

创建 React Native 应用程序：

第 1 步：创建一个 react-native 项目：

npx react-native init DemoProject

第 2 步：现在安装 react-native-paper

npm install react-native-paper

第三步：启动服务器

npx react-native run-android

项目结构：项目应如下所示：

示例：在这里，我们将请求选项作为第二个参数与正文一起发送。这个主体在 API 中处理。

PostRequestExample.js

import React, { useState, useEffect } from "react";
import { Text, View, StyleSheet, Alert } from 'react-native';
import { Button } from "react-native-paper";
  
const PostRequestExample = () => {
  
    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ postName: 'React updates ' })
    };
  
    const postExample = async () => {
        try {
            await fetch(
                'https://reqres.in/api/posts', requestOptions)
                .then(response => {
                    response.json()
                        .then(data => {
                            Alert.alert("Post created at : ", 
                            data.createdAt);
                        });
                })
        }
        catch (error) {
            console.error(error);
        }
    }
  
    return (
        
            
        
    )
  
}
  
export default PostRequestExample;
  
const styles = StyleSheet.create({
    btn: {
        marginTop: 60,
        marginLeft: 30,
        marginRight: 30
    }
})

App.js

import React from 'react';
import type { Node } from 'react';
import { Text, View } from 'react-native';
import PostRequestExample from './components/PostRequestExample';
  
const App: () => Node = () => {
    return (
        
            
        
    );
};
  
export default App;

App.js：将此文件导入您的 App.js

应用程序.js

import React from 'react';
import type { Node } from 'react';
import { Text, View } from 'react-native';
import PostRequestExample from './components/PostRequestExample';
  
const App: () => Node = () => {
    return (
        
            
        
    );
};
  
export default App;

保存并通过以下命令重新启动服务器：

npx react-native run-android

输出：