反应导航 Stack.Screen 中的 {...props} 是什么？

Question

What is the significance of {...props} on this page ?

<Stack.Screen name="Home">
  {props => <HomeScreen {...props} extraData={someData} />}
</Stack.Screen>

Without {...props} also, my app runs fine.

Answer 1

Based on the docs description:

Sometimes we might want to pass additional props to a screen.

For passing additional props it uses a renderer (render callback) function. actually, it is additional and obviously your codes should word without it.

The formal usage is like below:

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{ title: 'Overview' }}
/>

Als, in the formal usage React Navigation , applies optimizations to screen components to prevent unnecessary renders. I offer you to use this style, but if you need the additional props that the Stack.Screen would pass to the render component, use the renderer version but note using a renderer removes whole given optimizations by React Navigation .

If you wanna know what is the additional props, use the renderer version and then use console.log it in HomeScreen component:

const HomeScreen = props => {
  console.log(props);

  return (
    <View>
      <Text>Home Screen</Text>
    </View>
  );
}