Question

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

Answer 1

如果您有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';

OR

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

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

constants.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文件中一样

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

Answer 2

此外，您可以尝试Babel Plugin Inline Import，它的设计正是为了做到这一点。如果您对旧版本的文本文件进行更改，请注意 babel 缓存的问题。

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

2 个答案: