React native 如何在react导航中使用用户指定的主题？

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

颜色.背景

，

颜色.重音

当用户通过身份验证时，我会提供他们的基本详细信息和一个主题对象。使用redux（

state.auth.user.theme

）将其存储在我的应用程序状态中

我有一个AppNavigation，其中创建了我的导航器

AppNavigation.js 我尝试过的事情

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

---

想法和想法？此外，该应用程序的核心是使用if生成的

在ReduxNavigation中使用

屏幕道具找到了一种方法：

class ReduxNavigation extends React.Component {

  render() {
    const { dispatch, nav, user } = this.props
    const navigation = ReactNavigation.addNavigationHelpers({
      dispatch,
      state: nav
    })
    return <AppNavigation navigation={navigation} screenProps={{ user }} />
  }

}

类ReduxNavigation扩展了React.Component{
render（）{
const{dispatch，nav，user}=this.props
const navigation=ReactNavigation.addNavigationHelpers({
派遣，
国家：nav
})
返回
}
}

然后，在需要自定义主题的导航器上的AppNavigation中，我执行以下操作：

DrawerNavigation = StackNavigator({
  DrawerStack: { screen: DrawerStack }
}, {
    headerMode: 'float',
    navigationOptions: ({ navigation, screenProps }) => {
      let headerText = Colors.headerText;
      let brand = Colors.brand;
      let accent = Colors.accent;
      if (screenProps.user) {
        let theme = screenProps.user.club.theme;
        brand = theme.brand;
        headerText = theme.headerText;
        accent = theme.accent;
      }
      return ({
        headerStyle: { backgroundColor: brand },
        title: 'Welcome!',
        headerTintColor: headerText,
        gesturesEnabled: false,
        headerRight: drawerButton(navigation, headerText),
        headerLeft: <Image source={Images.clubLogo} style={logoStyle} />
      })
    }
  })

DrawerNavigation=StackNavigator({
抽屉钉：{屏幕：抽屉钉}
}, {
headerMode:'浮动'，
导航选项：（{navigation，screenProps}）=>{
让headerText=Colors.headerText；
让品牌=颜色。品牌；
让accent=Colors.accent；
if（screenProps.user）{
让主题=screenProps.user.club.theme；
品牌=主题。品牌；
headerText=主题。headerText；
accent=theme.accent；
}
返回({
头型：{背景颜色：品牌}，
标题：“欢迎！”，
headerText颜色：headerText，
手势已启用：错误，
headerRight:抽屉按钮（导航，headerText），
左校长：
})
}
})
在ReduxNavigation中使用
屏幕道具找到了一种方法：

class ReduxNavigation extends React.Component {

  render() {
    const { dispatch, nav, user } = this.props
    const navigation = ReactNavigation.addNavigationHelpers({
      dispatch,
      state: nav
    })
    return <AppNavigation navigation={navigation} screenProps={{ user }} />
  }

}

类ReduxNavigation扩展了React.Component{
render（）{
const{dispatch，nav，user}=this.props
const navigation=ReactNavigation.addNavigationHelpers({
派遣，
国家：nav
})
返回
}
}

然后，在需要自定义主题的导航器上的AppNavigation中，我执行以下操作：

DrawerNavigation = StackNavigator({
  DrawerStack: { screen: DrawerStack }
}, {
    headerMode: 'float',
    navigationOptions: ({ navigation, screenProps }) => {
      let headerText = Colors.headerText;
      let brand = Colors.brand;
      let accent = Colors.accent;
      if (screenProps.user) {
        let theme = screenProps.user.club.theme;
        brand = theme.brand;
        headerText = theme.headerText;
        accent = theme.accent;
      }
      return ({
        headerStyle: { backgroundColor: brand },
        title: 'Welcome!',
        headerTintColor: headerText,
        gesturesEnabled: false,
        headerRight: drawerButton(navigation, headerText),
        headerLeft: <Image source={Images.clubLogo} style={logoStyle} />
      })
    }
  })

DrawerNavigation=StackNavigator({
抽屉钉：{屏幕：抽屉钉}
}, {
headerMode:'浮动'，
导航选项：（{navigation，screenProps}）=>{
让headerText=Colors.headerText；
让品牌=颜色。品牌；
让accent=Colors.accent；
if（screenProps.user）{
让主题=screenProps.user.club.theme；
品牌=主题。品牌；
headerText=主题。headerText；
accent=theme.accent；
}
返回({
头型：{背景颜色：品牌}，
标题：“欢迎！”，
headerText颜色：headerText，
手势已启用：错误，
headerRight:抽屉按钮（导航，headerText），
左校长：
})
}
})

DrawerNavigation = StackNavigator({
  DrawerStack: { screen: DrawerStack }
}, {
    headerMode: 'float',
    navigationOptions: ({ navigation, screenProps }) => {
      let headerText = Colors.headerText;
      let brand = Colors.brand;
      let accent = Colors.accent;
      if (screenProps.user) {
        let theme = screenProps.user.club.theme;
        brand = theme.brand;
        headerText = theme.headerText;
        accent = theme.accent;
      }
      return ({
        headerStyle: { backgroundColor: brand },
        title: 'Welcome!',
        headerTintColor: headerText,
        gesturesEnabled: false,
        headerRight: drawerButton(navigation, headerText),
        headerLeft: <Image source={Images.clubLogo} style={logoStyle} />
      })
    }
  })