No he visto esta sintaxis antes y me pregunto de qué se trata.

var { Navigation } = require('react-router');

Los corchetes de la izquierda arrojan un error de sintaxis:

símbolo inesperado {

No estoy seguro de qué parte de la configuración del paquete web se está transformando o cuál es el propósito de la sintaxis. ¿Es una cosa de la armonía? ¿Alguien puede iluminarme?

Se llama asignación de desestructuración y es parte del estándar ES2015 .

La sintaxis de asignación de desestructuración es una expresión de JavaScript que hace posible extraer datos de matrices u objetos utilizando una sintaxis que refleja la construcción de matrices y objetos literales.

Fuente: Referencia de asignación de desestructuración en MDN

Desestructuración de objetos

 var o = {p: 42, q: true};
 var {p, q} = o;

 console.log(p); // 42
 console.log(q); // true 

 // Assign new variable names
 var {p: foo, q: bar} = o;

 console.log(foo); // 42
 console.log(bar); // true

Desestructuración de matrices

var foo = ["one", "two", "three"];

// without destructuring
var one   = foo[0];
var two   = foo[1];
var three = foo[2];

// with destructuring
var [one, two, three] = foo;

Esta es una tarea desestructuradora . Es una nueva característica de ECMAScript 2015.

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

Es el equivalente a:

var AppRegistry = React.AppRegistry;
var StyleSheet = React.StyleSheet;
var Text = React.Text;
var View = React.View;

var { Navigation } = require('react-router');

... usa la desestructuración para lograr lo mismo que ...

var Navigation = require('react-router').Navigation;

... pero es mucho más legible.

Es una nueva característica de ES6 para desestructurar objetos.

Como todos sabemos, aquí se está llevando a cabo una operación de asignación, lo que significa que el valor del lado derecho se asigna a la variable del lado izquierdo.

var { Navigation } = require('react-router');

En este caso, el require('react-router')método devuelve un objeto con un par clave-valor, algo como

{ Navigation: function a(){}, Example1: function b(){}, Example2: function c(){} }.

Y si quisiéramos tomar una clave en ese objeto devuelto, digamos Navigationa una variable, podemos usar la destrucción de objetos para eso.

Esto solo será posible si tenemos la llave en mano.

Entonces, después de la declaración de asignación, la variable local Navigationcontendráfunction a(){}

Otro ejemplo tiene este aspecto.

var { p, q } = { p: 1, q:2, r:3, s:4 };
console.log(p) //1;
console.log(q) //2;