代码之家 › 专栏 › 技术社区 › Avinash Raj

React Native ActiveTintColor未应用于选定的抽屉项目

react-native reactjs javascript

Avinash Raj · 技术社区 · 5 年前

React Native ActiveTintColor未应用于选定的抽屉项目。我的react本地导航路线看起来像,

-> 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,它将在drawer item click上导航到相应的堆栈屏幕,从而在侧栏上显示了第一个、第二个、第三个屏幕。

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>)
    }

它被正确地导航到主堆栈上的chaptergroup屏幕,但是drawer activeitem指向 Home 不是第二个或第三个自定义名称。我认为这可能是因为所有其他屏幕都存在于rootstack中。是否仍要手动将第二个抽屉项目设置为活动?

或任何成功实施 DrawerNavigator 里面 StackNavigator ?我想用Stack Navigator的两个屏幕作为抽屉。如果我们从主屏幕导航到特定的屏幕,应该选择相应的抽屉项。

0 回复 | 直到 5 年前

Ravi 5 年前

不确定你是否试过 contentOptions 或者没有,但这是我从React导航文档中找到的

contentOptions for DrawerItems

有多种属性可用于ContentOptions

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

从上面的片段我猜是给你的 activeTineColor 可能有用。

diogenesgg 5 年前

我不确定你的意图 resetStack 功能。

如果改用以下函数,它将起作用:

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

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

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

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

推荐文章