如何将图像放入反应原生抽屉中？答案

【问题标题】：How to put an image in a react-native drawer?如何将图像放入反应原生抽屉中？
【发布时间】：2022-01-22 12:37:57
【问题描述】：

我正在使用@react-navigation/native 库。我有一个抽屉，里面有一些屏幕。我可以单击链接并导航到相应的屏幕。我想在抽屉中的链接上方放置一张图片。我正在使用属性drawerContent 来执行此操作。但是，当我这样做时，它会删除链接。我不知道如何在抽屉中的链接上方放置链接和图像。这样做的正确方法是什么？这是我的抽屉的一些代码，drawerContent。

    <NavigationContainer>
      <Drawer.Navigator
        initialRouteName="Screen1"
         drawerContent={() => (
           <View style={{height: "10%"}}>
             <Image
             style={{width: "90%"}}
             resizeMode="contain"
             source={require('../../../assets/new-logo/textSide.png')}/>
           </View>
         )}
        screenOptions={ ({navigation}) => ({
          drawerContainerStyle: {paddingTop: 100},
          drawerLabelStyle: {
            fontSize: KbStyles.properties.drawerLabelSize,
            color: "white"
          },
          headerTintColor: {color: KbStyles.properties.white},
          headerStyle: {
            backgroundColor: KbStyles.properties.black
          },
          headerTitleStyle: {
            fontSize: KbStyles.properties.headerSize,
            color: "white"
          },
          headerLeft: () => (
    
            <TouchableWithoutFeedback
              onPress={() => {navigation.toggleDrawer()}}>
              <Image
                resizeMode="contain"
                style={{height: "50%"}}
                source={require("../../../assets/menu.png")}
              />
            </TouchableWithoutFeedback>
          ),
          drawerActiveBackgroundColor : KbStyles.properties.red,
          drawerActiveTintColor: KbStyles.properties.white,
          drawerStyle: {
            backgroundColor: "black",
            width: 300
    
          }
        })}
      >
        <Drawer.Screen name="Screen1" component={Screen1} />
        <Drawer.Screen name="Screen2 component={Screen2} />
        <Drawer.Screen name="Screen3" component={Screen3} />
    
      </Drawer.Navigator>
    </NavigationContainer>

这也是一张图片，展示了我想要实现的目标。

这样做的正确方法是什么？

【问题讨论】：

标签： react-native

【解决方案1】：

你可以试试这个

在 Drawer.Navigator 下，你可以使用drawerContent作为，

 drawerContent={(props)=> {
        return(
            <View style={{flex:1}}>
                <DrawerContentScrollView {...props}>
                    <ImageBackground source={require("../Assets/Vrda1img2.jpg")} style={{justifyContent:"space-between",alignItems:"center",padding:20,marginBottom:20,backgroundColor:"rgb(0,0,0)",borderBottomWidth:2,borderColor:Colors.secondary}} imageStyle=
                        {{opacity:0.4}}>
                        <Image source={require("../Assets/vector.png")} style={{width:70,height:70,borderRadius:35,borderWidth:2,borderColor:Colors.white}}/>
                        <Text style={{fontSize:20,fontWeight:"bold",color:Colors.white}}>{userDetail?userDetail.name:"Not Available"}</Text>
                        <Text style={{color:Colors.light}}>{userDetail?userDetail.email:"Not Available"}</Text>
                    </ImageBackground>
                    <DrawerItemList {...props}/>
                </DrawerContentScrollView>
                <TouchableOpacity onPress={()=>{logout()}} style={{position:"relative",right:0,left:0,bottom:5,backgroundColor:"rgb(231,230,230)"}}>
                    <Text style={{backgroundColor:"rgba(162,160,160,0.29)",width:"100%",height:40,textAlign:"center",paddingTop:8}}><SimpleLineIcons name={"logout"} size={15} color={Colors.primary}/> LogOut</Text>
                </TouchableOpacity>
            </View>
        )
    } 
 }

我给你我的代码的参考，你可以在图片背景下添加图片，你也可以使用 Uri 来添加图片作为链接。

【讨论】：