Expo React Native自动导航实现：获取文件名并创建导航链接

你用list-react-files和list-files包失败的核心原因是：这两个工具是Node.js环境专用的文件系统工具，依赖Node的fs模块，但Expo React Native运行在移动端/浏览器沙箱环境，没有访问本地文件系统的权限，直接调用会导致Promise阻塞，应用一直处于加载状态。

以下是可行的解决方案：

方案一：开发时自动生成导航配置（推荐） #

通过Node.js脚本在启动前自动扫描screens文件夹，生成导航配置文件，运行时直接使用该配置生成导航器和按钮。

步骤1：创建导航配置生成脚本 #

在项目根目录新建generate-nav-config.js：

const fs = require('fs');
const path = require('path');

// 目标文件夹：src/screens
const screensDir = path.join(__dirname, 'src', 'screens');
// 生成的配置文件路径
const outputPath = path.join(__dirname, 'src', 'navConfig.js');

// 筛选出屏幕组件文件（排除HomeScreen，因为是首页）
const screenFiles = fs.readdirSync(screensDir).filter(file => {
  const isScreenFile = (file.endsWith('.js') || file.endsWith('.jsx'));
  const isNotHome = file !== 'HomeScreen.js' && file !== 'HomeScreen.jsx';
  return isScreenFile && isNotHome;
});

// 构建导航配置
const navConfig = {};
screenFiles.forEach(file => {
  // 提取屏幕名称：比如ComponentsScreen.js → Components
  const screenName = file.replace(/Screen\.(js|jsx)$/, '');
  // 存储组件路径
  navConfig[screenName] = `./src/screens/${file}`;
});

// 写入配置文件
const exportCode = `export default ${JSON.stringify(navConfig, null, 2)};`;
fs.writeFileSync(outputPath, exportCode);

console.log(`✅ 导航配置已生成：${outputPath}`);

步骤2：配置预启动脚本 #

修改package.json的scripts，添加预启动钩子，确保每次启动应用前自动生成配置：

{
  "scripts": {
    "prestart": "node generate-nav-config.js",
    "preandroid": "node generate-nav-config.js",
    "preios": "node generate-nav-config.js",
    "preweb": "node generate-nav-config.js",
    "start": "expo start -p 19000 -a",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  }
}

步骤3：修改App.js使用动态导航配置 #

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import HomeScreen from "./src/screens/HomeScreen";
// 导入自动生成的导航配置
import navConfig from "./src/navConfig";

// 动态加载所有屏幕组件
const screenComponents = {};
Object.entries(navConfig).forEach(([screenName, componentPath]) => {
  screenComponents[screenName] = require(componentPath).default;
});

const navigator = createStackNavigator(
  {
    Home: HomeScreen,
    // 展开所有动态生成的屏幕配置
    ...screenComponents,
  },
  {
    initialRouteName: "Home",
    defaultNavigationOptions: {
      title: "App",
    },
  }
);

export default createAppContainer(navigator);

步骤4：在HomeScreen生成导航按钮 #

修改src/screens/HomeScreen.js，读取导航配置生成按钮：

import React from 'react';
import { View, Button, StyleSheet } from 'react-native';
import navConfig from '../navConfig';

const HomeScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      {Object.keys(navConfig).map(screenName => (
        <Button
          key={screenName}
          title={`跳转至${screenName}`}
          onPress={() => navigation.navigate(screenName)}
        />
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 20,
    gap: 12,
  },
});

export default HomeScreen;

方案二：运行时获取Assets文件（仅适用于静态资源） #

如果你的需求是读取Assets文件夹中的文件，而非项目组件文件，可以使用Expo的expo-asset模块：

import { Asset } from 'expo-asset';

// 读取Assets下指定文件夹的文件
async function getAssetFiles() {
  try {
    // 注意：这里的路径需要根据你的实际Assets结构调整
    const assets = await Asset.loadAsync([require('./assets/**/*')]);
    const fileNames = assets.map(asset => asset.name);
    console.log(fileNames);
    return fileNames;
  } catch (error) {
    console.error('读取Assets失败:', error);
  }
}

但注意：此方法无法读取项目源码文件（如screens下的组件），仅适用于图片、音频等静态资源。

内容的提问来源于stack exchange，提问作者Fatih Y.