如何在反应导航中使用用户指定的主题？

我一直在尝试为我的 react-navigation 导航器设置主题，这很容易使用硬编码颜色，即Colours.background, Colours.accent.

当用户通过身份验证时，我会提供他们的基本详细信息和主题对象。这使用 redux ( state.auth.user.theme)存储在我的应用程序状态中

我有一个 AppNavigation，我的导航器是在其中创建的。

应用导航.js

import React from 'react'
import { Text, Animated, Easing, Image, View } from 'react-native'
import { StackNavigator, DrawerNavigator, addNavigationHelpers } from 'react-navigation'
import Icon from 'react-native-vector-icons/EvilIcons'
import { connect } from 'react-redux'

import DrawerContainer from '../Containers/DrawerContainer'
import ScreenTwoScreen from '../Containers/ScreenTwoScreen'
import ScreenOneScreen from '../Containers/ScreenOneScreen'
import DashboardScreen from '../Containers/DashboardScreen'
import LoginScreen from '../Containers/LoginScreen'

import styles from './Styles/NavigationStyles'
import ThemeProvider from '../Themes/ThemeProvider';
import Images from '../Themes/Images';

const Colors = ThemeProvider()

const DrawerStack = DrawerNavigator({
  screenOneScreen: { screen: ScreenOneScreen },
  dashboardScreen: { screen: DashboardScreen },
}, {
    gesturesEnabled: false,
    contentComponent: DrawerContainer
  })

const drawerButton = (navigation) =>
    <Text
      style={{ padding: 5, color: 'white' }}
      onPress={() => {
        // Coming soon: navigation.navigate('DrawerToggle')
        // https://github.com/react-community/react-navigation/pull/2492
        if (navigation.state.index === 0) {
          navigation.navigate('DrawerOpen')
        } else {
          navigation.navigate('DrawerClose')
        }
      }
      }><Icon name="navicon" color={Colors.headerText} size={24} /></Text>


// login stack
const LoginStack = StackNavigator({
  loginScreen: { screen: LoginScreen },
}, {
    headerMode: 'none',
    navigationOptions: {
    }
  })

const logoStyle = {
  height: 45,
  width: 45,
  marginLeft: 10,
  resizeMode: 'contain'
}
const DrawerNavigation = StackNavigator({
  DrawerStack: { screen: DrawerStack }
}, {
    headerMode: 'float',
    navigationOptions: ({ navigation }) => ({
      headerStyle: { backgroundColor: Colors.brand },
      title: 'Welcome!',
      headerTintColor: Colors.headerText,
      gesturesEnabled: false,
      headerRight: drawerButton(navigation),
      headerLeft: <Image source={Images.clubLogo} style={logoStyle} />
    })
  })


// Manifest of possible screens
const PrimaryNav = StackNavigator({
  loginStack: { screen: LoginStack },
  drawerStack: { screen: DrawerNavigation }
}, {
    // Default config for all screens
    headerMode: 'none',
    initialRouteName: 'loginStack',
    navigationOptions: {
      headerStyle: styles.header
    }
  })

export default PrimaryNav

这在 ReduxNavigation.js 中使用：

ReduxNavigation.js

import React from 'react'
import * as ReactNavigation from 'react-navigation';
import { connect } from 'react-redux'
import AppNavigation from './AppNavigation'
import Colors from '../Themes/Colors'
import ThemeProvider from '../Themes/ThemeProvider'
// here is our redux-aware our smart component
class ReduxNavigation extends React.Component {
  static navigationOptions = ({ navigation, screenProps }) => {
    console.log(navigation)
    return {
      headerStyle: {
        backgroundColor: this.props.user ? this.props.user.club.brand : Colors.brand
      }
    }
  }
  render() {
    const { dispatch, nav, user } = this.props
    const navigation = ReactNavigation.addNavigationHelpers({
      dispatch,
      state: nav
    })


    // if (user) {
    //   theme = ThemeProvider(user.club.theme)
    // }
    return <AppNavigation navigation={navigation} />
  }

}

const mapStateToProps = state => ({ nav: state.nav, user: state.auth.user })
export default connect(mapStateToProps)(ReduxNavigation)

主题提供者.js

没有什么花哨：

import Colors from './Colors';

const ThemeProvider = (other ={}) => {
    return Object.assign({}, Colors, other)
}

export default ThemeProvider;

我尝试过的事情

• 创建了一个将用户主题合并为颜色的主题提供程序方法，它有效但不正确。
• 将 AppNavigation 的核心移动到 ReduxNavigation 的渲染方法中，但这使得应用程序无响应，这是可以理解的。
• 试图找出一种将主题作为道具传递给 PrimaryNav 的方法，react-navigation 不喜欢额外的道具。

想法和想法？此外，如果有任何用途，应用程序的核心是使用InfiniteRed/ignite生成的。