React Native如何从常量文件调用样式并动态传递参数？

现有register.js文件中的代码片段：

import CustomHeader from '../components/Header';
...
 static navigationOptions = ({navigation, navigation: { state } }) => {
        return {
            title: '',
            headerStyle: CustomHeader
        }
    };

以及用于定义样式的常量文件代码：

import { getStatusBarHeight } from "react-native-safearea-height";
 import { Platform } from 'react-native'; 

 var iosMarginTop = getStatusBarHeight(true);
 const headerStyle = ({backgroundColor = '#000'}) => {
    backgroundColor: backgroundColor,
    marginTop: Platform.OS == 'ios' ? iosMarginTop : 0
 }

 export default headerStyle;

需要实现：动态调用该自定义Header样式并传递特定UI样式参数（如backgroundColor），未传递参数时保持默认值#000。

1. 修正常量文件的语法错误 #

原headerStyle函数存在两处问题：箭头函数直接返回对象时未用括号包裹，且未处理无参数调用时的解构报错。修正后的代码如下：

import { getStatusBarHeight } from "react-native-safearea-height";
import { Platform } from 'react-native'; 

const iosMarginTop = getStatusBarHeight(true);
// 给函数参数添加默认空对象，避免无参数时解构失败；用括号包裹返回的对象
const headerStyle = ({ backgroundColor = '#000' } = {}) => ({
    backgroundColor: backgroundColor,
    marginTop: Platform.OS === 'ios' ? iosMarginTop : 0
});

export default headerStyle;

2. 在register.js中动态调用样式函数 #

传递自定义参数（如指定背景色）

引入修正后的样式函数，调用时传入包含目标参数的对象：

// 替换为你的常量文件实际路径
import headerStyle from '../constants/headerStyle';
...
static navigationOptions = ({ navigation }) => {
    return {
        title: '',
        // 传递自定义背景色参数
        headerStyle: headerStyle({ backgroundColor: '#2196F3' })
    };
};

使用默认参数（不传递参数）

直接调用函数即可自动使用默认的#000背景色：

import headerStyle from '../constants/headerStyle';
...
static navigationOptions = ({ navigation }) => {
    return {
        title: '',
        // 无参数调用，使用默认样式
        headerStyle: headerStyle()
    };
};

内容的提问来源于stack exchange，提问作者Shah Amir