Question

如标题中所述，contentComponent无法正常工作。我无法弄清楚为什么它没有在contentcomponent中呈现内容。

它显示我在抽屉导航器中显示的屏幕1 2和注销，而不是它。任何建议表示赞赏？ Routes.js

    import React from 'react';
    import {
        createAppContainer,
        createSwitchNavigator,
        createStackNavigator,
        createBottomTabNavigator,
        createDrawerNavigator
    } from 'react-navigation';
import { SideNavigation } from './SideNavigation';

    export const SignedOut = createStackNavigator(
    {
        Login: {
            screen: LoginForm,
            navigationOptions: {
                header: null
            }
        },
        Register: {
            screen: RegisterForm
        },
        VerifyPhone: {
            screen: PhoneVerify,
            navigationOptions: {
                headerLeft: null
            }
        }
    },
    {
        initialRouteName: "Login"
    }
);

export const Tabs = createBottomTabNavigator({
    Main: {
        screen: createStackNavigator({
            Main: Main
        }),
    },
    Events: {
        screen: createStackNavigator({
            Events: Events
        }),
    },
    Shop: {
        screen: createStackNavigator({
            Shop: Shop
        }),
    },
    Profile: {
        screen: createStackNavigator({
            Profile: Profile
        }),
    },
});

export const Stack = createStackNavigator(
    {
        Drawer: {
            screen: SideNavigation,
            navigationOptions: {
                header: null,
            },
        },
        DefaultScreen: {
            screen: Main,
        }
    }
);

export const createRootNavigator = (loggedin) => {
    return createAppContainer(createSwitchNavigator(
        {
            SignedIn: {
                screen: Stack
            },
            SignedOut: {
                screen: SignedOut
            },
        },
        {
            //initialRouteName: loggedin ? "SignedIn" : "SignedOut"
            initialRouteName: "SignedIn"
        }
    ));
};

SideNavigation.js

import { createDrawerNavigator, SafeAreaView } from 'react-navigation';
import { ScrollView } from 'react-native-gesture-handler';
import { Text, Dimensions } from 'react-native';
import { Stack } from "./Routes";

export const SideNavigation = createDrawerNavigator(
    {
        home: Stack
    },
    {
        contentComponent: (props) => {
           return <Drawer {...props} >
                <ScrollView>
                    <SafeAreaView
                        forceInset={{top: 'always', horizontal: 'never'}}
                    >
                        <Text
                            onPress={() => {
                                props.navigation.navigate('Screen1');
                                props.navigation.closeDrawer();
                            }}
                        >
                            Testing Side 1
                        </Text>
                        <Text
                            onPress={() => {
                                props.navigation.navigate('Screen2');
                                props.navigation.closeDrawer();
                            }}
                        >
                            Testing side 2
                        </Text>
                    </SafeAreaView>
                </ScrollView>
            </Drawer>
        },
    }
);

编辑：代码已更新。我现在收到一条错误消息，提示“ home”必须是React组件。

Answer 1

将您的自定义组件作为单独的组件文件提供，如下所示：

import Drawer from "./somewhere"; 
 const Stack = createStackNavigator(
{

    DefaultScreen: {
        screen: Main,
    }
}
);

const DrawerNavigator = createDrawerNavigator({
    home: Stack <<<<this is an address of the stack navigator you should created above
}, {
        contentComponent: (props) => {

            return <Drawer {...props} /> <<<<Drawer
        },
        drawerPosition: 'right',
        drawerType: 'slide',
        drawerWidth: width * 0.8
    }
)

更合乎逻辑和更清洁...但是不要忘记为应用容器提供抽屉：

 return createAppContainer(createSwitchNavigator(
        {
            SignedIn: {
                screen: DrawerNavigato//not stack 
            },
            SignedOut: {
                screen: SignedOut
            },
        },
        {
            //initialRouteName: loggedin ? "SignedIn" : "SignedOut"
            initialRouteName: "SignedIn"
        }
    ));

contentComponent无法正常工作React Native Navigation

1 个答案: