Reactjs 如何缩短抽屉导航器中添加标题的代码？

我不熟悉react native，我正在使用react navigator 现在我正在尝试将标题添加到页面中。但我认为我的代码并没有遵循干燥原则

这是照片

这是我的密码

const Drawer = createDrawerNavigator();
const HomeStack = createStackNavigator();
const AboutStack = createStackNavigator();

//this one
const HomeStackScreen = ({navigation}) => (
  <HomeStack.Navigator
    screenOptions={{
      headerStyle: {backgroundColor: '#009388'},
      headerTintColor: '#fff',
    }}>
    <HomeStack.Screen
      name="Home"
      component={HomeScreen}
      options={{
        title: 'Home',
        headerLeft: () => (
          <Icon.Button
            name="bike"
            size={25}
            backgroundColor="#009388"
            onPress={() => {
              navigation.openDrawer();
            }}></Icon.Button>
        ),
      }}
    />
  </HomeStack.Navigator>
);

//this one

const AboutStackScreen = ({navigation}) => (
  <AboutStack.Navigator
    screenOptions={{
      headerStyle: {backgroundColor: '#009388'},
      headerTintColor: '#fff',
    }}>
    <AboutStack.Screen
      name="About"
      component={AboutScreen}
      options={{
        title: 'About',
        headerLeft: () => (
          <Icon.Button
            name="bike"
            size={25}
            backgroundColor="#009388"
            onPress={() => {
              navigation.openDrawer();
            }}></Icon.Button>
        ),
      }}
    />
  </AboutStack.Navigator>
);

const DrawerNavigator = ({navigation}) => {
  return (
    <Drawer.Navigator drawerContent={(props) => <DrawerContent {...props} />}>
      <Drawer.Screen name="Home" component={HomeStackScreen} />
      <Drawer.Screen name="More" component={MoreScreen} />
      <Drawer.Screen name="About" component={AboutStackScreen} />
      <Drawer.Screen name="FindBike" component={FindBikeShop} />
      {/* Aricles Screens */}
      <Drawer.Screen name="Cases" component={Cases} />
      <Drawer.Screen name="Guides" component={Guides} />
      <Drawer.Screen name="LatestBlogs" component={LatestBlogs} />
      <Drawer.Screen name="LatestNews" component={LatestNews} />
      <Drawer.Screen name="News" component={News} />
  );
};

const Drawer=createDrawerNavigator（）；
const HomeStack=createStackNavigator（）；
const AboutStack=createStackNavigator（）；
//这个
const HomeStackScreen=（{navigation}）=>(
(
{
navigation.openDrawer（）；
}}>
),
}}
/>
);
//这个
const AboutStackScreen=（{navigation}）=>(
(
{
navigation.openDrawer（）；
}}>
),
}}
/>
);
常量抽屉导航器=（{navigation}）=>{
返回(
}>
{/*Aricles屏幕*/}
);
};

---

正如您在代码中看到的。我正在为

HomeStack

和

AboutStack

重写相同的

createStackNavigator

代码。随着页面的增长，我的代码库也会越来越大。是否有缩短这些代码的方法？

您可以创建函数来返回您发现自己正在重用的基本导航器，并将任何唯一值作为参数传递

const createMyStackNavigator=（名称、屏幕）=>（{navigation}）=>{
const Stack=createStackNavigator（）；
返回(
(
{
navigation.openDrawer（）；
}}
>
),
}}
/>
);
};
const HomeStackScreen=createMyStackNavigator（“主”，主屏幕）；
const AboutStackScreen=createMyStackNavigator（'About'，AboutScreen'）；