移动屏幕,屏幕下方可见

时间:2019-07-12 09:01:52

标签: reactjs react-native react-navigation

使用VideoPlayerNestedDrawer屏幕导航到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秒钟,然后后面的屏幕消失,并且恢复正常:

enter image description here

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

0 个答案:

没有答案