react-native - 在标题中显示自定义组件

Question

在一个屏幕上，我希望在标题上显示一个自定义组件。

我尝试过:

 const MyScreen = ({route, navigation}) => {
  
  navigation.setOptions({
    headerTitle: props => {
      <MyComponent {...props} />;
    },
  });

  ...
 export default MyScreen;

但它显示为空白，如下所示:

为了进一步验证该方法是否正确，我还尝试简单地显示一段文字:

navigation.setOptions({
    headerTitle: props => {
      <Text {...props}> Hello </Text>;
    },
  });

它还在页眉标题区域中显示空白。我缺少什么？如何在标题中显示自定义组件？

(MyScreen 由堆栈导航器托管)

Answer 1

问题是您没有返回组件，因此它没有显示。

你应该写:

const MyScreen = ({route, navigation}) => {
  
React.useLayoutEffect(() => {
  navigation.setOptions({
    headerTitle: props => {
      return <MyComponent {...props} />;
    },
  });
}, [navigation]);
  ...
export default MyScreen;

或者更简洁的语法:

const MyScreen = ({route, navigation}) => {
  
React.useLayoutEffect(() => {
  navigation.setOptions({
    headerTitle: props => <MyComponent {...props} />,
  });
}, [navigation]);
  ...
export default MyScreen;

您还需要使用 useLayoutEffect，因为您无法从不同组件的函数体内更新组件。
useLayoutEffect 在渲染之后、屏幕视觉更新之前同步运行，这将防止显示标题时屏幕闪烁。

顺便说一句，由于您似乎不需要使用函数作为组件的 Prop ，因此您可以直接在导航器中定义此选项，如下所示:

<Stack.Navigator>
  <Stack.Screen
    name="MyScreen"
    component={MyScreen}
    options={{ headerTitle: props => <MyComponent {...props} /> }}
  />
</Stack.Navigator>