Question

我正在使用React Navigation抽屉，并且我希望每个抽屉屏幕标题具有不同的fontSize（自定义样式）。更改抽屉内容选项中的labelStyle将更改所有抽屉屏幕标题的fontSize，我想对每个标题进行自定义。

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

Answer 1

Drawer.Navigator提供了一个名为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>
  );
}

有关完整示例，请参见link

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

1 个答案: