добавить значок в ящик реагировать-навигация v5

Я пытаюсь добавить значок на каждый из экранов в моем ящике реагирования-навигации, но значок не отображается.

вот мой код:

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"}} />
        {/*
         * Rest Screens
         */}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

в документации значок добавления упоминается только в DrawerItem:

https://reactnavigation.org/docs/en/drawer-navigator.html


react-native react-navigation react-navigation-drawer react-navigation-v5
person nfn    schedule 24.02.2020    source источник
comment
передать пользовательский компонент   -  person Wahdat Jan    schedule 24.02.2020

Ответы (4)


arrow_upward
13
arrow_downward

Вам нужно просто добавить drawerIcon в параметры

<Drawer.Navigator>
    <Drawer.Screen name="Home" component={Home}
        options={{
           title: 'Home',
           drawerIcon: ({focused, size}) => (
              <Ionicons
                 name="md-home"
                 size={size}
                 color={focused ? '#7cc' : '#ccc'}
              />
           ),
        }}
   />
</Drawer.Navigator>

вы также можете передать цвет напрямую вот так

...
drawerIcon: ({color, size}) => (
            <Ionicons
               name="md-home" size={size} color={color}
            />
          ),
...

здесь я использовал иониконы для значка, вы можете использовать свой собственный компонент значка или импортировать иониконы из 'react-native-vector-icons / Ionicons'.

person Vishal Pawar    schedule 19.05.2020

arrow_upward
9
arrow_downward

Передайте drawerIcon в options вашего экрана:

options={{
  title: 'Product',
  drawerIcon: ({ focused, size }) => (
    <Image
      source={require('./images/icons/plumbing-b.png')}
      style={[focused ? styles.drawerActive : styles.drawerInActive, { height: size, width: size }]}
    />
}}

https://reactnavigation.org/docs/en/drawer-navigator.html#drawericon

person satya164    schedule 25.02.2020

arrow_upward
1
arrow_downward

Вы можете добавить значки в DrawerItem в компоненте DrawerContent.

в приложении:

function Drawer() {
  return (
      <Drawer.Navigator 
       drawerStyle={styles.drawer}
        initialRouteName="Home" 
        drawerPosition='right'
        drawerContentOptions={{
          activeTintColor: 'white',
          inactiveTintColor: 'white',
          itemStyle: { alignItems:'flex-end' },
        }}
        drawerContent={props => <DrawerContent {...props}/>}
      >
        <Drawer.Screen name="AppTab" component={AppTab1} options={{ headerStyleInterpolator: forFade ,title:"home" ,style={styles.drawerActive}/> }} />
        <Drawer.Screen name="News" component={NotificationsScreen} options={{ headerStyleInterpolator: forFade ,title:"new items" style={styles.drawerActive}/> }} />

      </Drawer.Navigator>

  );
}

в DrawerContent:

                  <DrawerItem
                    label='News'
                    onPress={() => 
                      props.navigation.navigate('News')}                                           
                    icon={() =>
                      <Image
                        style={styles.icon}
                        source={require('./images/icons/plumbing-b.png')
                      />
                    }
                  />
person Polina    schedule 25.02.2021

arrow_upward

arrow_downward

person    schedule
comment
Брат, ты вставил один и тот же код в оба места. - person Vipul Tyagi; 25.11.2020