React-навигация 5-кратное использование Stack.Screen screenProps

Question

Я хочу пройти мимо screenProps в React-навигации v5.x.x. Я один из новичков в react-native. Может кто-нибудь мне помочь?

Answer 1

Нет никаких screenPropsв React Navigation 5. Вы можете использовать функцию контекста React вместо передачи данных по дереву без дополнительного API.

https://reactnavigation.org/docs/en/upgrading-from-4.x.html

Answer 2

В моем случае я передаю свои данные, например:

props.navigation.navigate('toScreen', {
    resumeDetail: data,
})

и вы можете получить к нему доступ, например:

detail = this.props.navigation.state.params.resumeDetail;

Answer 3

https://reactnavigation.org/docs/screen/#children

Обратный вызов рендеринга, чтобы вернуть React Element для использования на экране:

       <Stack.Screen name="Profile">
 {(props) => <ProfileScreen {...props} />}
</Stack.Screen>

Вы можете использовать этот подход вместо реквизита компонента, если вам нужно передать дополнительные реквизиты. Хотя мы рекомендуем вместо этого использовать контекст React для передачи данных.

Примечание. По умолчанию React Navigation применяет оптимизацию к компонентам экрана, чтобы предотвратить ненужную визуализацию. Использование обратного вызова рендеринга удаляет эти оптимизации. Поэтому, если вы используете обратный вызов рендеринга, вам необходимо убедиться, что вы используете React.memoили же React.PureComponentдля компонентов экрана, чтобы избежать проблем с производительностью.

Это то, что я использую на данный момент:

      // ...

export const ScanPage = React.memo(ScanComponent);

      function useScreenWithProps(
  PageComponent: React.FC<Props>,
  props: Props
) {
  // Take note of the double arrow,
  // the value useMemo returns is a function that returns a component.
  return useMemo(
    () => (navigationProps: NavigationProps) => (
      <PageComponent {...navigationProps} {...props} />
    ),
    [PageComponent, props]
  );
}

const Stack = createStackNavigator();

const Navigator: React.FC<Props> = (props) => {
  const scan = useScreenWithProps(ScanPage, props);
  const activate = useScreenWithProps(ActivatePage, props);
  const calibrate = useScreenWithProps(CalibratePage, props);
  const success = useScreenWithProps(SuccessPage, props);
  const error = useScreenWithProps(ErrorPage, props);

  return (
    <Stack.Navigator>
      <Stack.Screen name="Scan">{scan}</Stack.Screen>
      <Stack.Screen name="Activate">{activate}</Stack.Screen>
      <Stack.Screen name="Calibrate">{calibrate}</Stack.Screen>
      <Stack.Screen name="Success">{success}</Stack.Screen>
      <Stack.Screen name="Error">{error}</Stack.Screen>
    </Stack.Navigator>
  );
};