如何在React Native中使用变量实现动态导入对应版本的样式文件？

原代码问题分析 #

1. Version.js导出语法错误：原代码未正确声明变量就直接默认导出，严格模式下会报错
2. 静态import不支持动态路径：ES模块的静态import必须使用固定字符串路径，无法通过模板字符串动态生成路径导入文件

修正后的代码实现 #

1. 修复Version.js的导出 #

// Version.js
const styleVersion = 'v2';
export default styleVersion;

2. 修复样式文件的变量声明（v1和v2目录下的TextStyle1.js） #

v1/TextStyle1.js

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  text: {
    color: 'blue',
    fontSize: 20,
  },
});

export default styles;

v2/TextStyle1.js

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  text: {
    color: 'red',
    fontSize: 20,
  },
});

export default styles;

两种动态选择样式的方案 #

方案一：同步条件导入（适合版本数量固定的场景） #

提前导入所有版本的样式，根据版本常量选择对应样式，无需异步加载：

// Text1.js
import { Text, View } from 'react-native';
import styleVersion from './Version.js';

// 预先导入所有版本的样式文件
import TextStyleV1 from '../v1/TextStyle1.js';
import TextStyleV2 from '../v2/TextStyle1.js';

// 根据版本常量匹配对应样式
const TextStyle1 = styleVersion === 'v1' ? TextStyleV1 : TextStyleV2;

const Text1 = props => {
  return (
    <View>
      <Text style={TextStyle1.text}>{styleVersion}</Text>
    </View>
  );
};

export default Text1;

方案二：动态异步导入（适合版本较多或按需加载的场景） #

使用ES模块的动态import语法，在组件中异步加载对应版本的样式：

// Text1.js
import { Text, View, useState, useEffect } from 'react-native';
import styleVersion from './Version.js';

const Text1 = props => {
  const [textStyle, setTextStyle] = useState(null);

  useEffect(() => {
    // 根据版本动态导入样式文件
    import(`../${styleVersion}/TextStyle1.js`)
      .then(module => setTextStyle(module.default))
      .catch(err => {
        console.error('样式加载失败:', err);
        // 加载失败时设置降级样式
        setTextStyle({ text: { color: 'gray', fontSize: 20 } });
      });
  }, [styleVersion]); // 版本变化时重新加载样式

  // 样式未加载完成时显示占位内容
  if (!textStyle) {
    return <View><Text>加载中...</Text></View>;
  }

  return (
    <View>
      <Text style={textStyle.text}>{styleVersion}</Text>
    </View>
  );
};

export default Text1;

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