自定义导航抽屉的图像未关闭

如何解决自定义导航抽屉的图像未关闭

我的自定义抽屉导航出现问题。我正在使用expo，并且在iOS上一切正常，但对于android，我在抽屉上有一个图像。如下图所示，关闭抽屉时图像没有关闭。任何帮助将不胜感激https://i.stack.imgur.com/cB8nW.png

    const combineNavigation = createDrawerNavigator({
    'first':{
        screen: Main,labelStyle:'blue',navigationoptions:{
            drawerIcon:()=> <FontAwesome5 name="parking" size={30} color='blue'/>
        }
    },'second':{
        screen:ParkingNavigation,contentOptions:{
            labelStyle:{
                color:"#e91e63"
            }
        },navigationoptions:{
            drawerIcon:()=> <Image
            style={{width:25,height:25}}
            source={require('../assets/ru.jpg')}
        />
        }

    },'third':{
        screen:contact,contentOptions:{
            labelStyle:{
                color:"blue"
            }
        },navigationoptions:{
            drawerIcon:()=> <MaterialIcons name="contacts" size={20} color='blue'/>
            
        }

    }
},{
    contentComponent:(props) => (
        <SafeAreaView style={{flex:1}}>
            <View style={{height: 150,alignItems: 'center',justifyContent: 'center'}}>
            <Image source={require ('../assets/icon.png')} style={{height:120,width:120,borderRadius:60}}/>
            </View>
          <ScrollView>
            <DrawerItems {...props} />
          </ScrollView>
        </SafeAreaView>
       ),contentOptions:{
        activeTintColor: '#e91e63',inactiveTintColor:'blue',itemStyle: { marginVertical: 15 },}
})

解决方法

也许您的抽屉图标尺寸不固定。

{
    Main: {
      screen: MainStack,navigationOptions: {
        drawerLabel: SCREEN_TEXT_HOME_HEADER,drawerIcon: ({ tintColor }) => (
          <Image
            source={require("../assets/icons/home.png")}
            resizeMode="contain"
            style={{ width: 20,height: 20,tintColor: tintColor }}
          />
        )
      }
    }
  }

已更新：SafeAreaView和ScrollView可能会导致contentComponent中的问题