小编nfn*_*nfn的帖子

我正在尝试向我的 react-navigation 抽屉中的每个屏幕添加一个图标，但该图标没有出现。

这是我的代码：

function Drawer() {
  return (
      <Drawer.Navigator 
       drawerStyle={styles.drawer}
        initialRouteName="Home" 
        drawerPosition='right'
        drawerContentOptions={{
        activeTintColor: 'white',
        inactiveTintColor: 'white',
        itemStyle: { alignItems:'flex-end' },
       }}>
        <Drawer.Screen name="AppTab" component={AppTab1} options={{ headerStyleInterpolator: forFade ,title:"home" ,icon:<Image source={require('./images/icons/plumbing-b.png')} style={styles.drawerActive}/> }} />
        <Drawer.Screen name="News" component={NotificationsScreen} options={{ headerStyleInterpolator: forFade ,title:"new items" icon:<Image source={require('./images/icons/plumbing-b.png')} style={styles.drawerActive}/> }} />
        
      </Drawer.Navigator>
    
  );
}


export function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          options={{
            headerTitleAlign:"center",
            headerRight: ({}) => <HeaderRight />,
            headerLeft: ({}) => <Search />
          }}
          component={Drawer}
          name="Drawer"
        />
        <Stack.Screen name="Product" component={Product} options={{title:"product"}} …

我正在使用 react-navigation 版本 5。我有标签导航和抽屉导航。

我正在尝试在我的标题中添加一个图标来打开/关闭抽屉：

这是我用于切换抽屉的自定义右侧标题：

const HeaderRight = ({ navigation }) => {   
    return (
      <View style={{flexDirection: 'row'}}>
        <TouchableOpacity
        onPress={ () =>{ navigation.toggleDrawer()}}>  //here is the problem
          <Image source={require('./assets/images/icons/drawer.png')}/>
        </TouchableOpacity>
      </View>
    );}

这是我的标签导航器：

const Tab = createBottomTabNavigator();
function AppTab() {
  return (
     <Tab.Navigator>         
        <Tab.Screen name="Category" component={Category} />    
        <Tab.Screen name="Home" component={Home}/>
      </Tab.Navigator>
   );}

抽屉导航：

    const Drawer = createDrawerNavigator();  
    function App() {
      return (    
          <Drawer.Navigator>
            <Drawer.Screen name="AppTab" component={AppTab} />
            <Drawer.Screen name="Notifications" component={NotificationsScreen} />
          </Drawer.Navigator>  
      );}

和我的堆栈导航器到主题混合所有：

const Stack = createStackNavigator();
  export …