时间戳

首页 > 解决方案 > 如何在 React Native 中存储和导入静态文件？

react-native - 如何在 React Native 中存储和导入静态文件？

问题描述

我想将静态 *.txt、*.svg 甚至 *.js 文件存储在assets文件夹（或其他通常首选的路径）中的 React Native 项目（干净，没有任何 Expo 和其他包装器、Webpacks，仅使用 Babel）中. 然后我想将它们作为字符串导入 App.js。关于这个话题有很多相互矛盾的信息。如何在全新的应用程序中正确执行此操作？

标签： react-nativebabeljs

解决方案

如果您有一个 json 文件，例如：

const data = {
  key1: 'value1',
  key2: 'value2',
};

export default data;

访问您的数据的唯一方法是通过：

import data from '../your/relative/path/to/data';

如果您想在该文件中导入特定密钥，那么您的 json 文件将是这样的：

export const key1 = 'value1';
export const key2 = 'value2';

const data = {
    key1,
    key2,
};

export default data;

现在你有能力做到这一点：

import { key1 } from '../your/relative/path/to/data';

或者

import data from '../your/relative/path/to/data';

我建议使用文本文件，将它们存储在一个文件夹中，并为每个类别constants制作一个相关文件：.js

常量.js 文件：

export const CONST_KEY_1 = 'some value';
export const CONST_KEY_2 = 'some other value';
export default {
    CONST_KEY_1,
    CONST_KEY_2
};

对于 svg 文件：

快速方法：以file_uri与我们在 constants.js 文件中相同的方式将每个文件的

更好的方法：以svg path与我们在 constants.js 文件中相同的形式存储这些 svg 文件......并使用 react-native-svg npm 模块渲染这些文件。

推荐阅读