我怎样才能创建一个看起来像这样的导航标题组件？答案

【问题标题】：How can i create a navigation header component looking like that?我怎样才能创建一个看起来像这样的导航标题组件？
【发布时间】：2021-04-09 12:36:50
【问题描述】：

我想知道如何创建一个自定义导航标题组件，它看起来像这样：

我有几个问题。我应该如何从 png 文件中使这些图标可点击？我应该从该文件中一一提取它们并以某种方式使它们可点击吗？假设我有一个干净的这个标题的布局，我怎么能把它设置为这个标题的背景？我怎样才能将此组件交付给从事同一工作的其他人，以便他们轻松实现其导航功能？

假设我们的堆栈导航器在 App.js 文件中，它看起来像这样：

import React from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from "@react-navigation/stack";
import Home from "./screens/Home";
import Report from './screens/Report';

export default function App() {

  const Stack = createStackNavigator();

  return (
    /* Nawigacja podstawowa, w stylu Stosu */
    <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" 
          component={Home} 
          options={{title:'Strona Główna'}}
          />
          <Stack.Screen name="Report" component={Report} />
        </Stack.Navigator>
    </NavigationContainer>
  );
}

【问题讨论】：

标签： android react-native react-native-android react-native-navigation

【解决方案1】：

您可以将此自定义标题创建为组件，例如 HeaderBar.js，然后将此客户标题添加到其选项中的屏幕/导航器例如：

<Stack.Screen
    name="Home"
    component={Home}
    title="Home"
    options={{
      title:'Strona Główna',
      header: () => <HeaderBar />,
    }}
  />

或在 Stack.Navigator 中添加标题。例如：

<Stack.Navigator initialRouteName="Home" screenOptions={{header: () => <HeaderBar />}}>

【讨论】：

好的，我想我知道怎么做，只是需要玩一下。