在react-navigation中动态更改DrawerNavigator的drawerPosition配置

时间:2017-09-19 14:33:22

标签: react-native react-redux react-navigation

我的主要路线有一个DrawerNavigator配置

const App = DrawerNavigator(DrawerRoutes, {
  initialRouteName: 'Main',
  contentComponent: ({ navigation }) => <DrawerMenu navigation={navigation} routes={DrawerRoutes} />,
  mode: Platform.OS === 'ios' ? 'modal' : 'card',
  drawerWidth: Dimensions.get('window').width - (Platform.OS === 'android' ? 56 : 64),
  drawerPosition: 'left',
})

我想根据应用程序的当前语言更改 drawerPosition 属性。 我已经尝试连接到redux但没有成功,因为它会为无效的React元素抛出错误。 如何动态更改drawerNavigator属性?

1 个答案:

答案 0 :(得分:2)

我最终得到了一个不那么优雅的解决方案。

我复制了反应导航的DrawerNavigator并将其添加到我的项目中。

修复了无法正常工作的导入以指向原始的react-navigation项目,并在DrawerView组件的drawerPosition属性上实现了应用程序逻辑

 const Drawer = I18nReader()(
({ i18n, ...restProps }) =>
  <DrawerView
    {...restProps}
    useNativeAnimations={useNativeAnimations}
    drawerWidth={drawerWidth}
    contentComponent={contentComponent}
    contentOptions={contentOptions}
    drawerPosition={i18n.rtl ? 'right' : 'left'}
  />
)

const navigator = createNavigator(
  drawerRouter,
  routeConfigs,
  config,
  NavigatorTypes.DRAWER
)(Drawer)