Блог

Я использую панель навигации React, и я хочу иметь разный размер шрифта (пользовательский стиль) для каждого заголовка экрана панели. Изменение LabelStyle в drawerContentOptions изменит размер шрифта для всех заголовков экрана ящика, и я хочу настроить каждый из них.

 <Drawer.Navigator
  drawerStyle={{
    backgroundColor: Colors.mainBackground,
    width: WIDTH * 0.6,
  }}

  drawerContentOptions={{
    activeTintColor: Colors.mainForeGround,
    itemStyle: { marginVertical: 8, marginHorizontal: 8 },
    labelStyle: {
      fontSize: 18,
    },
  }}
>
  <Drawer.Screen name="Profile" component={Profile}
    options={{
      title: 'Profile Name',
      drawerIcon: ({ color }) => {
        return <Icon name={'account'} size={ICON_SIZE} color={color} />
      },
    }}
  />
  <Drawer.Screen name="Menu" component={Menu}
    options={{
      title: 'Shopping menu',
      drawerIcon: ({ color }) => {
        return <Icon name={'menu'} size={ICON_SIZE} color={color} />
      },
    }}
  />
  <Drawer.Screen name="Cart" component={Cart}
    options={{
      title: 'Shopping cart',
      drawerIcon: ({ color }) => {
        return <Icon name={'cart'} size={ICON_SIZE} color={color} />
      },
    }}
  />
  <Drawer.Screen name="Settings" component={Settings}
    options={{
      title: 'Settings',
      drawerIcon: ({ color }) => {
        return <Icon2 name={'settings'} size={ICON_SIZE} color={color} />
      },
    }}
  />
</Drawer.Navigator>
  

Drawer.Navigator предоставляет вызываемый prop drawContent , который должен возвращать компонент React, который будет использоваться для отображения содержимого ящика.

Использование:

 function CustomDrawerContent(props) {
  return (
     <Here goes your code for rendering individual elements of your drawer>
  );
}

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name="Feed" component={Feed} />
      <Drawer.Screen name="Article" component={Article} />
    </Drawer.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}
  

Полный пример см. по ссылке