Блог

Итак, в документах для React-Navigation V5 говорится, что для добавления параметров в Screen вам необходимо получить доступ к следующему синтаксису

 <SettingsStack.Navigator>
  <SettingsStack.Screen
    name="B"
    component={B}
    options={{ tabBarLabel: 'Settings!' }}
  />
<SettingsStack.Navigator />
  

options Это объект, мой вопрос был бы в том, может ли это сработать, если я попытаюсь сделать это как функцию, то же самое касается setOptions метода навигации, он должен быть передан как

Это помогло бы мне, например, в удалении дублирования кода

 navigation.setOptions({
    headerLeft: () => Platform.select({
      ios: (
        <NavigationHeader.TextButton
          label={t('general.cancel')}
          onPress={navigation.pop(1)} //duplicated
        />
      ),
      android: (
        <NavigationHeader.IconButton
          iconName="times"
          label={t('general.cancel')}
          onPress={navigation.pop(1)} //duplicated 
        />
      )
    })
  });
  

Я дважды пишу одно и то же в onPress

Вы могли бы создать функцию, которая принимает функцию в качестве параметра, который определяет, что вы хотели бы сделать при нажатии на левую кнопку заголовка. Затем внутри этой функции вы можете вернуть функцию, которая возвращает ваш компонент headerLeft:

 function leftButton(clickHandler) {
  return () =>
    Platform.select({
      ios: (
        <NavigationHeader.TextButton
          label={t('general.cancel')}
          onPress={clickHandler}
        />
      ),
      android: (
        <NavigationHeader.IconButton
          iconName="times"
          label={t('general.cancel')}
          onPress={clickHandler}
        />
      ),
    });
}

// ...

navigation.setOptions({
  headerLeft: leftButton(() => {
    navigation.pop(1);
  }),
});
  

leftButton является примером функции более высокого порядка:https://en.wikipedia.org/wiki/Higher-order_function.

Таким образом, вы можете настроить clickHandler в одном месте, и onPress он будет обновлен для обеих кнопок.