как добавить изображение в качестве значка в DrawerItem в React Native v5 (0.62)?

Question

Я работаю над проектом React Native 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"
            />
          );
        }}