使用 React Navigation 的 headerTitle 时没有正确传递道具

Question

我正在像这样使用堆栈屏幕：

<NavigationContainer>
<Stack.Navigator>
  /* There's also the stack screen for calling the Albums screen here as well. */
  <Stack.Screen
    name="Albums"
    component={Albums}
    options={{
      headerStyle: {
        backgroundColor: "#191414",
      },
      headerTitle: (props) => <AlbumTitle {...props} />,
    }}
  />
</Stack.Navigator>
</NavigationContainer>

AlbumTitle.js：

import React, { Component } from "react";
import { View, Text } from "react-native";

class AlbumTitle extends Component {
  render() {
    console.log(this.props);
    return (
      <View>
        <Text>{this.props.name}</Text>
      </View>
    );
  }
}

export default AlbumTitle;

我从一个函数调用屏幕并像这样传递道具：

this.props.navigation.navigate("Albums", {
  id,
  name,
});

这不应该是这样吗？一旦函数调用屏幕并传递 id 和名称，当它渲染时，它也应该将 props 传递给 AlbumTitle 以便显示名称，但它不是这样工作的，而是 console.log(this.props) 正在返回：

Object {
  "allowFontScaling": undefined,
  "children": "Albums",
  "onLayout": [Function anonymous],
  "style": undefined,
  "tintColor": undefined,
}

Answer 1

你可以这样传递道具：

<Stack.Screen
  name="Albums"
  component={Albums}
  options={({ route }) => ({
    title: route.params.name,
    headerStyle: {
      backgroundColor: "#191414",
    },
    headerTitleStyle: {
      color: "white",
    },
  })}
/>

Answer 2

请参阅这部分文档以在您的AlbumTitle 组件https://reactnavigation.org/docs/headers/#using-params-in-the-title 中显示动态标题

  <Stack.Screen
        name="Albums"
        component={Albums}
        options={({ route }) => ({ title: route.params.name })}
      />

基本上，您需要在headerTitle 组件中设置一个选项变量title 并使用props.children 获取该标题选项

class AlbumTitle extends Component {
  render() {
    return (
      <View>
        <Text>{this.props.children}</Text>
      </View>
    );
  }
}