Передача реквизита на экраны в быстрой навигации

Question

Я хочу передать реквизит на экран. Когда я пробую это встроенное, например, (props) => <Comp {...props} {...customProps} />, я получаю предупреждающее сообщение, что я не должен анализировать функции для этого свойства компонента. Ладно. Я думал, что просто создам функции для каждого компонента, который нуждается в пользовательских реквизитах. Это работает, но есть ли лучшее решение? Вот мой компонент:

export default function Loading() {
  const [loggedIn, setLoggedIn] = React.useState(false);
  const Stack = createStackNavigator();
  const authService: AuthService = new AuthService();
  const authProps: IAuthProps = {
    authService
  };
  /**
   * Bind neccessary props to the login component
   * @param props Props
   */
  function LoginWithProps(props) {
    return <Login {...props} {...authProps} />;
  }
  /**
   * Bin neccessary props to the registration component
   * @param props Props
   */
  function RegistrationWithProps(props) {
    return <Registration {...props} {...authProps} />;
  }
  return (
    <>
      {/*Show the app, when logged in*/}
      {loggedIn === true ? (
        <View>
          <Text>Test</Text>
        </View>
      ) : (
        <Stack.Navigator
          initialRouteName="Login"
          screenOptions={{ headerShown: false, animationEnabled: false }}
        >
          <Stack.Screen name="Login" component={LoginWithProps} />
          <Stack.Screen name="Registration" component={RegistrationWithProps} />
        </Stack.Navigator>
      )}
    </>
  );
}
```

Answer 1

Ваш вариант не является хорошим решением проблемы, поскольку новые типы компонентов LoginWithProps и RegistrationWithProps будут создаваться при каждом рендеринге, то есть старые будут отключаться, а новые - каждый раз. То же самое происходит, когда вы передаете функцию, но без предупреждения

Нельзя передавать реквизиты на эти экраны, так как это не компонент Loading, который является прямым родителем этих экранов. Если вы хотите передать данные для настройки этих компонентов, вам нужно сделать это с помощью параметров навигации двумя способами:

1. при переходе к экрану navigation.navigate('Login', { param: 'hello' })
2. , указав начальный params

.

<Stack.Screen
  name="Login"
  component={Loaing}
  initialParams={{ param: 'hello' }}
/>

И прочитайте его в Login с props.route.params

Обратите внимание, что это называется initialParams по причине - они не реагирует, изменение их после установки компонента не имеет никакого эффекта (также возможно изменить их изнутри компонента). Если вы хотите передать реактивные параметры, используйте React Context или Redux

Передача параметров в маршруты