如何为 React 导航抽屉屏幕标题提供自定义样式答案

【问题标题】：How to provide a custom style to React navigation drawer screen title如何为 React 导航抽屉屏幕标题提供自定义样式
【发布时间】：2020-10-24 15:09:20
【问题描述】：

我正在使用 React Navigation 抽屉，我想为每个抽屉屏幕标题设置不同的 fontSize（自定义样式）。更改drawerContentOptions 中的labelStyle 会更改所有抽屉屏幕标题的字体大小，我希望每一个都自定义。

<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>

【问题讨论】：

标签： reactjs react-native react-navigation react-navigation-v5 react-navigation-drawer

【解决方案1】：

Drawer.Navigator 提供了一个名为 drawContent 的 prop，它需要返回一个 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>
  );
}

完整示例请参考link

【讨论】：