在反应导航中将道具很好地传递到屏幕 [英] Pass props nicely to screens in react navigation

问题描述

我想向屏幕传递一个道具.当我尝试内联时，例如 (props) =><Comp {...props} {...customProps}/> 我收到一条警告消息，我不应该将函数解析为该组件属性.好的.我以为我会为每个需要自定义道具的组件创建函数.它正在工作，但有更好的解决方案吗?这是我的组件:

I want to pass a prop to the screen. When I try that inline e.g (props) => <Comp {...props} {...customProps} /> I get a warning message, that I shouldn't parse functions to that component property. Okay. I thought I'll just create functions for every component which needs custom props. It is working, but is there a better solution? Here is my component:

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>
      )}
    </>
  );
}
```

推荐答案

你的不是一个好的解决方案，因为每次渲染都会创建新类型的 LoginWithProps 和 RegistrationWithProps 组件，这意味着旧的将被卸载，新的将被挂载每次.传递函数时会发生同样的事情，但没有警告

Yours is not a good solution to the problem because new types of LoginWithProps and RegistrationWithProps components will be created every render, meaning old ones will be unmounting and new ones mounting every time. The same thing that happens when you pass a function, but without a warning

您不能将 props 传递给这些屏幕，因为 Loading 组件不是这些屏幕的直接父级.如果你想传递数据来自定义这些组件，你需要通过导航参数来完成，有两种方式:

You can't pass props to these screens, as it is not the Loading component that is a direct parent to these screens. If you want to pass data to customize those components, you need to do it through navigation params, in 2 ways:

1. 导航到屏幕时 navigation.navigate('Login', { param: 'hello' })
2. 通过提供初始参数

.

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

并在 Login 中使用 props.route.params

请注意，虽然这被称为 initialParams 是有原因的 - 它们不是反应性的，在安装组件后更改它们没有效果(也可以从组件内部更改它们).如果您想传递响应式参数，请使用 React Context 或 Redux

Note though this is called initialParams for a reason - they are not reactive, changing them after component is mounted has no effect (it is also possible to change them from inside component). If you want to pass reactive params, use React Context or Redux

将参数传递给路由

这篇关于在反应导航中将道具很好地传递到屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！