在React Native中设置可自定义标题

Question

我希望在React Native上为我的Notes存储应用创建标题。到目前为止，我已经尝试过使用stackNavigator，但是我对如何添加菜单图标（onPres将打开抽屉）有所了解。我尝试在stackDesignHead中使用HeaderLeft，但它给出了错误。不建议同时使用FAB。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import HomePage from './src/HomePage/HomePage';
import NotesFolder from './src/notes';
import CreateNewFolder from './src/CreateNewFolder';
import Icon from 'react-native-vector-icons/Ionicons';
import Constants from 'expo-constants';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
const stackDesignHead = {
          title: "Notes Classifier", 

          headerTintColor:"white", 
          headerStyle:{ 
            backgroundColor:"#fcba03"

            },
            headerTitleStyle: {
              fontWeight: 'bold',
            },
            headerTitleAlign: 'center'
}
function LeftDrawer () {
  return(


          <Stack.Navigator>
          <Stack.Screen 
          name="HomePage"
          component={HomePage} 
          options={stackDesignHead}
          />
          <Stack.Screen 
          name="NotesFolder"
          component={NotesFolder} 
          options={{...stackDesignHead,title:"Notes"}}
          />
          <Stack.Screen 
          name="CreateNewFolder"
          component={CreateNewFolder} 
          options={{...stackDesignHead,title:"+ new Folder"}}
          />

          </Stack.Navigator>
  )
}

const menuDesignHead = {
  title: "Notes Classifier",

  headerTintColor:"white",
  headerStyle:{
    backgroundColor:"#fcba03"

    },
  headerTitleStyle: {
      fontWeight: 'bold',
    },
    headerTitleAlign: 'center'

}

function App () {

  return(
        <View style={styles.container}>
          <Drawer.Navigator initialRouteName="Home">
              <Drawer.Screen 
              name="Home"
              component={LeftDrawer} 
              options={{menuDesignHead}}
              />
              </Drawer.Navigator>
        </View>
  );
}
export default()=>{
  return(
    <NavigationContainer>
      <App/>

    </NavigationContainer>
  )
}

我是新手，对本地和不了解创建标头的各种方式都没有反应。

Answer 1

提供了一种在React导航文档中创建自己的自定义标题的方法。

用自定义组件替换标题

有时候，您不仅需要更改标题的文本和样式，还需要更多控制权-例如，您可能需要渲染图像来代替标题，或将标题变成按钮。在这些情况下，您可以完全覆盖用于标题的组件并提供您自己的组件。

示例

function LogoTitle() {
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require('@expo/snack-static/react-native-logo.png')}
    />
  );
}

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerTitle: props => <LogoTitle {...props} /> }}
      />
    </Stack.Navigator>
  );
}