ReactNavtive顶部导航栏+网络解析跳转详情(一),基本配置

最新推荐文章于 2025-07-29 10:11:08 发布

原创最新推荐文章于 2025-07-29 10:11:08 发布 · 352 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

笔记

当前文章被收录于：

笔记

1 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍如何在ReactNative项目中配置顶部导航栏，并通过StackNav组件实现页面跳转。同时，详细讲解了如何使用fetch进行网络请求，包括GET和POST方法的封装，以及如何处理API响应。

ReactNavtive顶部导航栏+网络解析跳转详情(一),基本配置

一：App.js中引用所需文件
import React, { Component } from “react”;
import StackNav from “./src/StackNav”;
export default class App extends Component {
render() {
return ;
}
}
二:index.js中去除黄色警告
import { AppRegistry } from “react-native”;
import App from “./App”;
console.disableYellowBox = true;
AppRegistry.registerComponent(“hello”, () => App);
三：封装接口fetchData.js
const baseURL = “https://cnodejs.org/api/v1”;
//封装的GET请求
export const getData = async (url, data) => {
let api = baseURL + url + “?”;
if (data) {
for (key in data) {
api += key + “=” + data[key] + “&”;
}
}
api = api.substr(0, api.length - 1);
let res = await fetch(api);
res = await res.json();
return res;
};
//封装的POST请求
export const postData = async (url, data) => {
let res = await fetch(url, {
headers: {
“content-type”: “application/json”
}, //请求头
body: JSON.stringify(data), //请求体
method: “POST” //请求类型
});
res = await res.json();
return res;
};