使用VideoPlayer
从NestedDrawer
屏幕导航到this.props.navigation.navigate("TestYourself", { id })
中的屏幕时。
我也在导航的屏幕下方短暂看到了HomeScreen
。
反正我可以藏在下面的HomeScreen
吗?
Home:{
screen: HomeScreen, // this is visible underneath
navigationOptions: ({ props }) => ({
header: props => <BasicHeader {...props} />
})
},
Drawer: {
screen: NestedDrawer, // navigate to screen in this stack
navigationOptions: ({ props }) => ({
header: () => null
})
},
VideoPlayer: {
screen: VideoPlayerScreen, //navigate from here
navigationOptions: ({ props }) => ({
header: props => <BasicHeader {...props} />
})
}
},
{
initialRouteName: "Home",
transparentCard: true
}
);
黄色框和问题文本来自NestedDrawer
堆栈中的屏幕。其后面的菜单项位于HomeScreen
上。持续约3秒钟,然后后面的屏幕消失,并且恢复正常:
AppNavigator:
const config = {
initialRouteName: "Home",
contentOptions: {
activeTintColor: "#e91e63",
itemStyle: {
flexDirection: "row-reverse"
}
},
drawerWidth: 300,
drawerPosition: "right"
};
const withHeader = (
screen: Function,
routeName: string,
Header
): StackNavigator =>
createStackNavigator(
{
[routeName]: {
screen,
navigationOptions: ({ routeName, props }) => ({
header: props => <Header {...props} />
})
}
},
{
transparentCard: true
}
);
const routes = {
.....
TestYourself: {
screen: withHeader(TestYourselfScreen, "Test Yourself", DrawerHeader)
},
....
Search: {
screen: withHeader(SearchScreen, "Search", DrawerHeader)
},
.....
};
const NestedDrawer = createDrawerNavigator(routes, config);
const MainStack = createStackNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: ({ props }) => ({
header: props => <BasicHeader {...props} />
})
},
Drawer: {
screen: NestedDrawer;,
navigationOptions: ({ props }) => ({
header: () => null
})
},
VideoPlayer: {
screen: VideoPlayerScreen,
navigationOptions: ({ props }) => ({
header: props => <BasicHeader {...props} />
})
}
},
{
initialRouteName: "Home",
transparentCard: true
}
);
export default createAppContainer(MainStack);