React Native activeTintColor 未应用于选定的抽屉项目答案

【问题标题】：React Native activeTintColor not getting applied on selected drawer itemReact Native activeTintColor 未应用于选定的抽屉项目
【发布时间】：2019-02-12 03:50:52
【问题描述】：

React Native activeTintColor 未应用于选定的抽屉项目。我的反应原生导航路线看起来像，

-> DrawerNavigator
   -> StackNavigator
      -> HomeScreen
      -> FirstScreen
      -> SecondScreen
      -> ThirdScreen

routes.js

const RootStack = createStackNavigator(
  {
    Home: { screen: HomeScreen },
    ChapterGroup: { screen: ChapterGroupScreen },
    Chapter: { screen: ChapterScreen },
  }

const DrawerStack = createDrawerNavigator(
  {
    Home: {
      screen: RootStack,
      params: { id: 1 }
    },
    Kural: { screen: ChapterGroupScreen, params: { id: 2 } },
    Detail: { screen: ChapterGroupScreen, params: { id: 3 } }
  }, { contentComponent: DrawerComponent}
}
export default DrawerStack;

我设法通过创建一个新的 DrawerComponent 在侧边栏上显示 First、Second、thirdScreens，该 DrawerComponent 将在抽屉项目单击时导航到适当的堆栈屏幕。

DrawerComponent.js

resetStack = route => {
 let pressedDrwaerItem = route.route.key;
 let id = route.route.params.id;
 this.props.navigation.dispatch(
   StackActions.reset({
    index: 1,
    actions: [
      NavigationActions.navigate({
        routeName: "Home"
      }),
      NavigationActions.navigate({
        routeName: "ChapterGroup",
        params: { title: pressedDrwaerItem, no: id }
      })
    ]
  })
);
}

render() {
      return (<ScrollView>
              <DrawerItems
              {...this.props}
              onItemPress={this.resetStack}
            </DrawerItems</ScrollView>)
    }

它正确导航到主页堆栈上的章节组屏幕，但抽屉活动项指向 Home 而不是第二个或第三个自定义名称。我认为这可能是因为所有其他屏幕都存在于 Rootstack 中。无论如何手动将第二个抽屉项目设置为活动？

或在StackNavigator 内成功实现DrawerNavigator？ IE。我想使用堆栈导航器中的两个屏幕作为抽屉项目。如果我们从主屏幕导航到该特定屏幕，则应选择相应的抽屉项目。

【问题讨论】：

如果您尝试导航到“ChapterGroup”，那么第二个屏幕将不会处于活动状态。您可以导航到“Kural”并使用参数来区分这些屏幕是否可以重组？
react-navigator 是哪个版本的？

标签： javascript reactjs react-native

【解决方案1】：

不确定您是否尝试过contentOptions，但这是我从 react-navigation 文档中找到的

contentOptions for DrawerItems

您可以将各种属性与 contentOptions 一起使用

contentOptions: {
  activeTintColor: '#e91e63',
  itemsContainerStyle: {
    marginVertical: 0,
  },
  iconContainerStyle: {
    opacity: 1
  }
}

从上面的 sn-p 我猜你activeTineColor 可能有用。

【讨论】：

【解决方案2】：

我不确定您对 resetStack 函数的意图。

如果你改用下面的函数，它就会起作用：

navigateToScreen = (route) => {
  const navigateAction = NavigationActions.navigate({
    routeName: route.route.key
  });
  this.props.navigation.dispatch(navigateAction);
}

//...
<DrawerItems
  {...this.props}
  onItemPress={this.navigateToScreen}>
</DrawerItems>

它设置新屏幕而不堆叠它。它设置了activeTintColor。

为了简单起见，我省略了传递的参数。

【讨论】：

这在复杂的路由器配置中对我有用，开关 > 抽屉 > bottomTabBar