在纯React Native项目中如何存储并导入静态文件？

Hey there! Let's cut through the conflicting info and lay out the exact, reliable steps to import static .txt, .svg, and .js files as strings in a bare React Native project (no Expo, no Webpack, just Babel). Here's what you need to do:

Start by organizing your static files in a clear directory—most folks use a root-level assets folder, like this:

your-project/
├── assets/
│   ├── txt/
│   │   └── sample.txt
│   ├── svg/
│   │   └── logo.svg
│   └── js/
│       └── static-script.js
├── App.js
├── babel.config.js
└── metro.config.js

This keeps things tidy and makes imports straightforward.

To import file content directly as strings, we'll use the babel-plugin-inline-import plugin—it's lightweight and designed for exactly this use case.

First, install it as a dev dependency:

npm install --save-dev babel-plugin-inline-import
# or
yarn add --dev babel-plugin-inline-import

Then update your babel.config.js to enable the plugin, specifying the file extensions you want to handle:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'babel-plugin-inline-import',
      {
        extensions: ['.txt', '.svg', '.js'], // Add all extensions you need here
      },
    ],
  ],
};

By default, Metro treats .js files as source code (not static assets). If you want to import a .js file's raw content as a string (instead of importing its exports), you need to tweak your metro.config.js:

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

const config = {
  resolver: {
    // Add .js to the list of recognized assets
    assetExts: [...assetExts, 'js'],
    // Remove .js from source extensions so Metro doesn't parse it as code
    sourceExts: sourceExts.filter(ext => ext !== 'js'),
  },
};

module.exports = mergeConfig(defaultConfig, config);

Skip this step if you don't need to import .js files as strings—.txt and .svg are already recognized as assets by default.

Now you can import your static files like regular modules, and their content will be loaded as strings:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

// Import your static files directly
import sampleText from './assets/txt/sample.txt';
import logoSvgSource from './assets/svg/logo.svg';
import staticJsSource from './assets/js/static-script.js';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Static Text:</Text>
      <Text>{sampleText}</Text>

      <Text style={styles.text}>SVG Source:</Text>
      <Text>{logoSvgSource}</Text>

      <Text style={styles.text}>JS File Source:</Text>
      <Text>{staticJsSource}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  text: {
    fontSize: 16,
    fontWeight: 'bold',
    marginTop: 20,
    marginBottom: 10,
  },
});

• If you get a "module not found" error: Double-check your file paths, and make sure Metro's asset extensions include your target file types.
• If .js imports still load exports instead of raw text: Verify you updated the Metro config correctly and restarted your Metro server (npx react-native start --reset-cache to clear caches).
• For SVG files: This approach gives you the raw SVG string—if you later want to render it as a component, you can use react-native-svg, but that's a separate setup.

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