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组件是这些屏幕的直接父级。如果要传递数据以自定义这些组件，则需要通过导航参数以两种方式进行操作：

导航到屏幕navigation.navigate('Login', { param: 'hello' })
通过扩展初始参数

。

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

并用Login在props.route.params中阅读

请注意，尽管这被称为initialParams是有原因的-它们没有反应性，但是在安装组件后更改它们无效（也可以从内部组件中更改它们）。如果要传递反应式参数，请使用React Context或Redux

Passing parameters to routes

在反应导航中将道具很好地传递到屏幕

1 个答案: