Question

我正在处理本机0.62项目，在其中创建了自定义抽屉。图像已正确添加到DrawerItemList，但不能与DrawerItem一起使用。我尝试了很多方法，但没有解决方案。我在这个问题上停留了2天。

MainNavigator.js
<Drawer.Navigator initialRouteName="Dashboard" drawerContent={(props) => <DrawerContent {...props} />} hideStatusBar={false} focused={true} labelStyle={{ fontSize: 14, fontFamily: 'OpenSans-SemiBold' }} drawerContentOptions={{ activeBackgroundColor: "#F1F1F1", activeTintColor: "#000000", inactiveTintColor: "#818181" }}>
      <Drawer.Screen name="Dashboard" component={DashboardStackScreen} options={{
        drawerIcon: ({ focused, size }) => (
          <Image source={require('../assets/images/dashboard.png')} style={{ height: 17.78, width: 16}}  resizeMode="contain"/>
        ),
      }}
      />
  <Drawer.Screen name="LMS" component={LmsStackScreen} options={{
        drawerIcon: ({ focused, size }) => (
          <Image source={require('../assets/images/lms.png')} style={{ height: 14.46, width: 16 }}  resizeMode="contain"/>
        ),
      }} />
      <Drawer.Screen name="Change Password" component={LmsStackScreen} options={{
        drawerIcon: ({ focused, size }) => (
          <Image source={require('../assets/images/key.png')} style={{ height: 8.73, width: 16 }}  resizeMode="contain"/>
        ),
      }} />
    </Drawer.Navigator>


DrawerContent.js

  <View style={{flex:5}}>
                        <DrawerContentScrollView {...props} >
                            <DrawerItemList {...props} />
                            <DrawerItem     
                            labelStyle={{ fontSize: 14, fontFamily: 'OpenSans-SemiBold' }}     activeBackgroundColor= "#F1F1F1" activeTintColor="#000000" inactiveTintColor= "#818181"
                          /*   options={{
                            drawerIcon: ({focused, color, size}) => (
                                <Icon
                                  name="home"
                                  style={{color: color, fontSize: size}}
                                />
                              )}} */
                            /*  options={{  */
                                 /* drawerIcon={ ({ focused, size }) => {
                                  <Image source={require('../assets/images/logout.png')} style={{ height: 15, width: 15 }} resizeMode="contain"/>
                                   size={size}}} */  /* }}  */
                            /*   }}    */                   
                                label="Logout"
                                icon={({ focused, color, size })=>{
                                    <Image source={require('../assets/images/logout.png')} style={{ height: size, width: size }} resizeMode="contain"/>
                                 }}   
                                onPress={() => console.log('Logout')}
                            />
                    
                        </DrawerContentScrollView>
                        </View>

感谢您的帮助。预先谢谢你。

Answer 1

问题真的很简单您正在使用花括号，因此在返回图像之前，它不会返回图像。

您可以更改以下代码

icon={({ focused, color, size }) => (
  <Image
    source={{ uri: 'https://reactjs.org/logo-og.png' }}
    style={{ height: size, width: size }}
    resizeMode="contain"
  />
)}

或者只是简单地输入以下内容

  icon={({ focused, color, size }) => {
          return (
            <Image
              source={{ uri: 'https://reactjs.org/logo-og.png' }}
              style={{ height: size, width: size }}
              resizeMode="contain"
            />
          );
        }}

如何在React Native V5（0.62）中的DrawerItem中添加图像作为图标？

1 个答案: