React Native中如何为自定义Appbar组件动态传递标题参数？

你的代码已经接近正确了，只需要调整两个小地方：

1. React类组件的render方法不需要接收title参数，它默认没有这个入参，直接通过this.props获取外部传入的属性即可。
2. 在使用这个自定义组件时，通过title属性把标题值传进去。

修正后的CustomAppbar组件代码 #

import * as React from "react";
import { Appbar } from "react-native-paper";

export default class CustomAppbar extends React.Component {
  render() { // 去掉多余的title参数
    return (
      <Appbar.Header>
        <Appbar.BackAction onPress={() => { }} />
        <Appbar.Content title={this.props.title} />
      </Appbar.Header>
    );
  }
}

使用自定义组件的示例 #

在其他页面中引入并使用时，直接通过title属性传递标题内容：

import CustomAppbar from './CustomAppbar'; // 根据你的文件路径调整

// 在页面组件中使用
export default function HomeScreen() {
  return (
    <>
      <CustomAppbar title="首页" />
      {/* 页面其他内容 */}
    </>
  );
}

如果后续需要给组件添加更多可配置项（比如是否显示返回按钮、返回按钮的点击事件），都可以通过props传递，比如：

扩展支持返回事件的版本 #

import * as React from "react";
import { Appbar } from "react-native-paper";

export default class CustomAppbar extends React.Component {
  render() {
    const { title, onBackPress } = this.props; // 解构props，代码更简洁
    return (
      <Appbar.Header>
        {onBackPress && <Appbar.BackAction onPress={onBackPress} />}
        <Appbar.Content title={title} />
      </Appbar.Header>
    );
  }
}

// 使用时
<CustomAppbar 
  title="详情页" 
  onBackPress={() => navigation.goBack()} 
/>

内容的提问来源于stack exchange，提问作者doğan kısa