React本机activeTintColor未应用于选定的抽屉项
React本机activeTintColor未应用于选定的抽屉项
提问于 2019-02-12 11:50:53
React本机activeTintColor未应用于选定的抽屉项。我的react原生导航路线看起来像这样，
-> DrawerNavigator
-> StackNavigator
-> HomeScreen
-> FirstScreen
-> SecondScreen
-> ThirdScreenroutes.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;我成功地在侧边栏上显示了第一个、第二个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栈上的ChapterGroup屏幕，但抽屉活动项指向Home，而不是第二个或第三个自定义名称。我认为这可能是因为所有其他屏幕都存在于Rootstack中。是否可以手动将第二个抽屉项设置为活动状态？
或者是否在StackNavigator中成功实现了DrawerNavigator？即。我想使用stack navigator中的两个屏幕作为抽屉项。如果我们从主屏幕导航到该特定屏幕，则应选择相应的抽屉项。
回答 2
Stack Overflow用户
发布于 2019-02-19 19:12:51
不确定您是否尝试过contentOptions，但这就是我在react导航文档中找到的内容
contentOptions for DrawerItems
您可以在contentOptions中使用各种属性
contentOptions: {
activeTintColor: '#e91e63',
itemsContainerStyle: {
marginVertical: 0,
},
iconContainerStyle: {
opacity: 1
}
}从上面的代码片段中，我猜activeTineColor可能会对你有用。
Stack Overflow用户
发布于 2019-02-21 06:12:05
我不确定您使用resetStack函数的意图。
如果你使用下面的函数，它将会起作用：
navigateToScreen = (route) => {
const navigateAction = NavigationActions.navigate({
routeName: route.route.key
});
this.props.navigation.dispatch(navigateAction);
}
//...
<DrawerItems
{...this.props}
onItemPress={this.navigateToScreen}>
</DrawerItems>它设置新的屏幕，而不是堆叠它。但是它设置了activeTintColor。
为了简单起见，我省略了参数传递。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54642534
复制相关文章
相似问题
腾讯云开发者
