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

Question

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

我也在使用 react native 标签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。有什么想法吗？

Answer 1

确保在导航到动态标题时将其传递到屏幕。

然后你可以将路由 obj 传递给你的 header 并从 route.params 中获取标题