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

Question

我是本机反应的新手，我正在使用反应导航器现在我正在尝试将 header 添加到页面中。 但我认为我的代码没有遵循干原则。

这是图片

这是我的代码

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} />
  );
};

正如您在代码中看到的那样。 我正在为HomeStack和AboutStack重写相同的createStackNavigator代码。 随着页面的增长，我的代码库也会变大。 有没有办法缩短这些代码？

Answer 1

您可以创建 function 以返回您发现自己重用的基本导航器，并将任何唯一值作为 arguments 传递。

const createMyStackNavigator = (name, screen) => ({ navigation }) => {
    const Stack = createStackNavigator();

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

const HomeStackScreen = createMyStackNavigator('Home', HomeScreen);
const AboutStackScreen = createMyStackNavigator('About', AboutScreen);