Что такое {... реквизит} в реагирующей навигации Stack.Screen?

Question

Какое значение {...props} на этой странице ?

<Stack.Screen name="Home">
  {props => <HomeScreen {...props} extraData={someData} />}
</Stack.Screen>

Без {...props} мое приложение также работает нормально.

Answer 1

На основе описания документов:

Иногда нам может понадобиться передать дополнительные реквизиты на экран.

Для передачи дополнительных реквизитов используется средство визуализации (обратный вызов рендеринга) ) функция. на самом деле, он является дополнительным, и, очевидно, ваши коды должны иметь слово без него.

Формальное использование выглядит следующим образом:

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{ title: 'Overview' }}
/>

Als, в формальном использовании React Navigation, применяет оптимизации к экрану компоненты для предотвращения ненужных рендеров. Я предлагаю вам использовать этот стиль, но если вам нужны дополнительные реквизиты, которые Stack.Screen будет передавать компоненту рендеринга, используйте версию рендерера , но обратите внимание использование рендерера удаляет все данные оптимизации на React Navigation .

Если вы хотите знать, что такое дополнительные реквизиты, используйте версию рендерера, а затем используйте console.log в компоненте HomeScreen:

const HomeScreen = props => {
  console.log(props);

  return (
    <View>
      <Text>Home Screen</Text>
    </View>
  );
}