React Native使用fetch()读取本地资源持续报网络请求失败错误

你代码里的逻辑存在关键偏差：fetch方法的入参必须是可被请求的资源访问地址（网络URL、或经RN打包处理的本地资源URI），但你从sampleFile.js导入的myText本身就是一段纯文本内容，根本不是合法的资源路径。把纯文本直接传给fetch，相当于让程序去访问"This is a sample text file."这个不存在的“网址”，自然会持续抛出网络请求失败的异常。

场景1：文本存储在js模块中（匹配你当前的实际代码情况） #

这种场景完全不需要调用fetch做请求，你已经通过import语句直接拿到了文本值，直接使用即可。
修正后的实现逻辑：

• 把原来在组件渲染阶段直接调用的fetch逻辑，挪到useEffect钩子中执行，避免组件重渲染时重复触发请求
• 直接打印导入的myText变量，不需要额外走网络请求流程

示例代码：

import React, { useEffect } from 'react';
import { StyleSheet, View, Text, Button } from 'react-native';
import { beginQuiz } from './helperfunctions';
import myText from './sampleFile.js';

export const QuestionScreen = ({ navigation, route }) => {
    useEffect(() => {
        // 直接使用导入的文本变量，不需要fetch
        console.log('文本内容：', myText);
    }, [])

    return (
        <View>
            <Text>This is the question screen</Text>
            <Button title='Sample Button'/>
        </View>
    )
};

注：原代码中引入的Stylesheet存在拼写错误，RN内置的对应组件名是StyleSheet，虽然当前逻辑未使用该模块，但后续开发容易踩坑。

场景2：需要读取独立的.txt本地静态文件 #

如果你后续需要把文本存在独立的.txt文件中、通过fetch方式读取，需要按照RN的静态资源加载规则实现：

• 把.txt文件放到项目的assets静态资源目录下，不要把文本写在js模块里
• 通过require引入本地txt资源，再调用RN内置的resolveAssetSource方法解析出可访问的本地资源URI，再把URI传给fetch请求

示例代码：

import React, { useEffect } from 'react';
import { resolveAssetSource } from 'react-native';

export const QuestionScreen = ({ navigation, route }) => {
    useEffect(() => {
        // 引入本地txt静态资源
        const txtResource = require('./assets/sample.txt');
        // 解析出可被fetch访问的本地资源路径
        const resourceUri = resolveAssetSource(txtResource).uri;

        fetch(resourceUri)
            .then(res => res.text())
            .then(content => console.log('txt读取结果：', content))
            .catch(err => console.log('读取失败：', err));
    }, [])

    return (
        <View>
            <Text>This is the question screen</Text>
            <Button title='Sample Button'/>
        </View>
    )
};

• 原代码的catch块捕获错误后直接throw error，会把异常抛到全局作用域，触发你看到的Unhandled promise rejection全局报错，在catch分支里完成错误日志打印、用户提示等处理逻辑即可，不需要无意义向上抛出未处理的异常
• 不要在组件的渲染函数中直接写异步请求逻辑，组件每次重渲染都会触发一次不必要的请求，统一放到useEffect中控制执行时机

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