React Native Elements Header 组件中的动态标题

如何解决React Native Elements Header 组件中的动态标题

我正在使用 https://reactnativeelements.com/docs/header

我也在使用本机标签https://reactnavigation.org/docs/bottom-tab-navigator/

    <Drawer
    ref={(ref) => this._drawer = ref}
    type="overlay"
    content={< MyDrawer />}
    tapToClose={true}
    open={false}
    openDrawerOffset={0.5}
    captureGestures={true}
    styles={drawerStyles}
    // tweenHandler={Drawer.tweenPresets.parallax}
    tweenHandler={(ratio) => {
      return {
        mainOverlay: { opacity: ratio / 1.5,backgroundColor: 'black' }
      }
    }}
    panopenMask={0.1} >
    <SafeAreaProvider>
      <Header
        leftComponent={
          <View>
            <TouchableOpacity onPress={() => this.calendarClick()}>
              <Ionicons name="calendar-outline" size={24} />
            </TouchableOpacity>
          </View>
        }
        centerComponent={{ text: "DYNAMIC_TITLE_HERE",style: { color: '#000',fontWeight: "bold",fontSize: 18,marginTop: 3 } }}
        rightComponent={<Ionicons name="cloud-upload-outline" size={24} />}
      />
      <NavigationContainer>
        <Tab.Navigator
          screenoptions={({ route }) => ({
            tabBarIcon: ({ focused,color,size }) => {
              let iconName = "ion-md-help";

              if (route.name === 'Home') {
                iconName = focused
                  ? 'ios-information-circle'
                  : 'ios-information-circle-outline';
              } else if (route.name === 'Settings') {
                iconName = focused ? 'ios-list-Box' : 'ios-list';
              }

              // You can return any component that you like here!
              return <Ionicons name={iconName} size={size} color={color} />;
            },})}
          tabBarOptions={{
            activeTintColor: '#2B95DA',inactiveTintColor: 'gray',}}>

          <Tab.Screen
            name="Targets"
            component={TargetsScreen}
            options={{
              tabBarIcon: ({ color }) => <Ionicons name="rocket" color={color} size={24} />
            }}
          />

          <Tab.Screen
            name="Settings"
            component={SettingsScreen}
            options={{
              tabBarIcon: ({ color }) => <Ionicons name="settings" color={color} size={24} />,}} />

        </Tab.Navigator>
      </NavigationContainer>
      <StatusBar barStyle="dark-content" />
    </SafeAreaProvider>
  </Drawer >

我没有找到任何可能如何动态替换 ->centerComponent 中的 DYNAMIC_TITLE_HERE。有什么想法吗？