如何使这段代码更干净？反应本机

Question

我正在构建一个堆栈导航器并想让它更干净我尝试了很多次但我做不到

这是我的代码，


export default function Navigation() {
  const {isSignedIn} = useSelector(state => state.authReducer);

  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}>
      {isSignedIn ? (
        <>
          <Stack.Screen name="HomeDrawer" component={HomeDrawer} />
          <Stack.Screen name="HomeScreen" component={HomeScreen} />
          <Stack.Screen name="ProductOverview" component={ProductOverview} />
          <Stack.Screen name="CartScreen" component={CartScreen} />
          <Stack.Screen name="OrderOverview" component={OrderOverview} />
        </>
      ) : (
        <>
          <Stack.Screen name="Login" component={Login} />
          <Stack.Screen name="SignUp" component={SignUp} />
          <Stack.Screen name="HomeDrawer" component={HomeDrawer} />
          <Stack.Screen name="HomeScreen" component={HomeScreen} />
          <Stack.Screen name="ProductOverview" component={ProductOverview} />
          <Stack.Screen name="CartScreen" component={CartScreen} />
          <Stack.Screen name="OrderOverview" component={OrderOverview} />
        </>
      )}
    </Stack.Navigator>
  );
}

我不想重复这样的代码，有没有办法不重复代码？

Answer 1

export default function Navigation() {
const {isSignedIn} = useSelector(state => state.authReducer);

return (
  <Stack.Navigator
    screenOptions={{
      headerShown: false,
    }}>
    {!isSignedIn && (
      <>
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="SignUp" component={SignUp} />
      </>
    )}
    <Stack.Screen name="HomeDrawer" component={HomeDrawer} />
    <Stack.Screen name="HomeScreen" component={HomeScreen} />
    <Stack.Screen name="ProductOverview" component={ProductOverview} />
    <Stack.Screen name="CartScreen" component={CartScreen} />
    <Stack.Screen name="OrderOverview" component={OrderOverview} />
  </Stack.Navigator>
);

}

嘿，试试这个。我还没有尝试执行这个，因为我现在没有环境设置。但它应该工作。希望能帮助到你。干杯。

如何使这段代码更干净？反应本机

How to make this code cleaner? react native

coding-style

react-native

react-navigation