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

Question

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

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 就更好了。

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

Custom Drawer component in react navigation 5.x not working properly

reactjs

react-native

react-navigation

react-navigation-drawer