React-Native 版本 0.63 中的自定义 header 组件（React-Native 导航文档中的混淆）

Question

我一直在阅读 React-Native 导航的文档。在 header 栏配置部分，它给出了一个示例来呈现自定义 header，如下所示：

function LogoTitle() {
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require('@expo/snack-static/react-native-logo.png')}
    />
  );
}

function StackScreen() {
return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerTitle: props => <LogoTitle {...props} /> }}
      />
    </Stack.Navigator>
  );
}

我对 **options={{ headerTitle: props => <LogoTitle {...props} /> }}** 传递给 LogoTitle 组件的道具感到困惑？

Answer 1

仅与 headerTitle 选项相关的道具。要找出答案，请在下面添加 console.log()，并检查 console.log.

function LogoTitle(props) {
  console.log('props = ', props);
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require('@expo/snack-static/react-native-logo.png')}
    />
  );
}