反应导航 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，它会说 Drawer 没有任何要渲染的屏幕。

以下是我使用自定义抽屉组件的应用程序：

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

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

谢谢你！

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，它也会更好。