在 header 中显示自定义组件

Question

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

我试过了：

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

  ...
 export default MyScreen;

但是显示空白如下：

为了进一步验证方法是否正确，我也尝试简单地展示了一段文字：

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

header标题区也显示空白。我错过了什么？如何在 header?

中显示自定义组件

（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，因为您无法从另一个组件的函数 body 中更新组件。
useLayoutEffect 在渲染之后但在屏幕视觉更新之前同步运行，这将防止您的屏幕在显示标题时闪烁。

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

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

在 header 中显示自定义组件

showing custom component in header

react-native

react-native-android

react-navigation

react-native-ios