react-native - React-navigation 5x 使用 Stack.Screen screenProps

Question

我想screenProps在 React-navigation中传递一些东西v5.x.x。我是 react-native 的新手之一。谁能帮我？

Answer 1

React Navigation 5 中没有screenProps。您可以使用React 的 Context 功能来将数据向下传递到树中，而无需额外的 API。

https://reactnavigation.org/docs/upgrading-from-4.x#global-props-with-screenprops

Answer 2

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

Answer 3

就我而言，我正在传递我的数据，例如：

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

你可以像这样访问它：

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