反应导航 5.x 中的自定义抽屉组件无法正常工作

Question

我尝试自定义react-navigation抽屉（v 5.x），因为我想在抽屉标题中添加公司信息。但这并不好，因为将自定义抽屉组件添加到抽屉会废弃抽屉上已经可用的任何导航项列表（所有屏幕的名称）。 以下是我的代码：

const CustomDrawerContentComponent = (props) => {
  return (<ScrollView>
    
      <View style={styles.drawerHeader}>
        <View style={{flex:1}}>
        <Image source={require('./images/logo.png')} style={styles.drawerImage} />
        </View>
        <View style={{flex: 2}}>
          <Text style={styles.drawerHeaderText}>Ristorante Con Fusion</Text>
        </View>
      </View>

  </ScrollView>)
  
};

render(){
  return(
     <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home" drawerStyle={{
    width: 240,
  }} drawerContent={(props)=><CustomDrawerContentComponent {...props} />}>
        <Drawer.Screen name="Home" component={HomePage} options={{
          title: 'Home',
          drawerIcon: ({focused, size}) => (
            <Icon
              name="home"
              type="font-awesome"
              size={size}
              color={focused ? '#7cc' : '#ccc'}
            />
          )
        }}/>
        <Drawer.Screen name="Menu" component={MenuNavigator} options={{
          title: 'Menu',
          drawerIcon: ({focused, size}) => (
            <Icon
              name="list"
              type="font-awesome"
              size={size}
              color={focused ? '#7cc' : '#ccc'}
            />
          )
        }}/>
        <Drawer.Screen name="Contact Us" component={ContactComponent} options={{
          title: 'Contact',
          drawerIcon: ({focused, size}) => (
            <Icon
              name="address-card"
              type="font-awesome"
              size={size}
              color={focused ? '#7cc' : '#ccc'}
            />
          )
        }}/>
        <Drawer.Screen name="About Us" component={AboutComponent} options={{
          title: 'About Us',
          drawerIcon: ({focused, size}) => (
            <Icon
              name="info-circle"
              type="font-awesome"
              size={size}
              color={focused ? '#7cc' : '#ccc'}
            />
          )
        }}/>
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

如果我尝试在customDrawerContentComponent 中移动屏幕组件，它会说抽屉没有任何屏幕可以渲染。

下面是我使用自定义抽屉组件的应用：

下面是我的应用程序，没有使用自定义抽屉组件：

所以我想让这两个组件都工作。这意味着，我应该在第二张图片中拥有徽标以及导航链接列表。我无法做到这一点。请帮助我实现这一目标。

谢谢！

Answer 1

您必须将 DrawerItemList 添加到自定义抽屉组件中

const CustomDrawerContentComponent = (props) => {
  return (<ScrollView>
    
      <View style={styles.drawerHeader}>
        <View style={{flex:1}}>
        <Image source={require('./images/logo.png')} style={styles.drawerImage} />
        </View>
        <View style={{flex: 2}}>
          <Text style={styles.drawerHeaderText}>Ristorante Con Fusion</Text>
        </View>
      </View>

 <DrawerItemList {...props} />   <-- this is required
  </ScrollView>)
  
};

如果您可以使用 DrawerContentScrollView 而不是 ScrollView，那就更好了。