React native 更改StackNavigator标题颜色时的反应

我正在用React Native制作一个应用程序，我正在尝试实现一个功能，该功能将更改标题的颜色，然后立即看到更改

我将标题的颜色设置为与全局样式表中的值相等。在样式表中更改颜色变量时，菜单在导航到新页面之前不会更改颜色

我有一个全局样式表，可以在我的应用程序的任何地方导入和使用

var globalStyles = Stylesheet.create({
    menuHex: {
        backgroundColor: '#6ed168'
    }
    ...other styles...
})

菜单使用以下代码。第2行的变量“DrawerStack”上有我所有的屏幕，但这并不重要。在第6行中，我使用了变量“globalStyles.menuHex”，该变量来自上一个代码片段中的样式表

const DrawerNavigation = StackNavigator({
    DrawerStack: {screen: DrawerStack },
}, {
    headerMode:'float',
    navigationOptions: ({navigation}) => ({
        headerStyle: globalStyles.menuHex,
        title: 'Application',
        headerTintColor: 'black',
        headerLeft: <TouchableOpacity onPress={() => {
                    navigation.navigate('DrawerToggle')
                    }}>
                       <Image source = {menuIcon}/>
                  </TouchableOpacity>
})

我的问题是，当“menuHex”变量发生更改时，直到我按下菜单切换按钮或更改页面后，更改才会显示。我需要它，以便在changetheme（）函数完成时更改菜单标题的颜色

---

非常感谢您的帮助

这是我的代码。它对我有用

为您所需的颜色替换mainColor

static navigationOptions = {
    title: strings('auth.btnLogin'),
    headerMode:"float",
    headerStyle: {
        backgroundColor: mainColor,
        elevation: null
    },

    headerTitleStyle: {
        fontWeight: '300',
        color: '#ffffff',
        fontSize: 20,
        flex:1,
        textAlign:"center"
    },
    // headerLeft: null
    backTitle: "Back",
    headerTintColor: '#fff',      
}

---

在我的例子中，你的意思是：将静态导航选项放在一个.js文件中，并将其导出为默认值。然后将my DroperNavigation变量嵌套在另一个堆栈导航器中，并让该堆栈导航器使用该导航选项（不能让DroperNavigation变量使用该导航选项，因为它需要用于菜单切换的导航变量）。或者这不起作用吗？即使它起作用了，我如何更改代码中的mainColor变量？对不起，我的错误，您不能设置color create by StyleSheet。如果可以的话。如果没有重新启动或设置状态，它将不会显示。但是，如果您希望在导航此屏幕或打开此屏幕之前设置颜色，则可以在component follow this[链接]中调用Drumernavigation。留言，我可以帮你谢谢你的回复。这让我想到尝试在内容之前设置颜色，这是通过创建加载屏幕来实现的。我在的响应显示了我所做的，但本质上我创建了一个运行函数的页面。该函数设置菜单的颜色，然后导航到下一页，在我的应用程序中是主页

static navigationOptions = {
    title: strings('auth.btnLogin'),
    headerMode:"float",
    headerStyle: {
        backgroundColor: mainColor,
        elevation: null
    },

    headerTitleStyle: {
        fontWeight: '300',
        color: '#ffffff',
        fontSize: 20,
        flex:1,
        textAlign:"center"
    },
    // headerLeft: null
    backTitle: "Back",
    headerTintColor: '#fff',      
}