Настройка настраиваемого заголовка в React Native - PullRequest
Новая
       45

Настройка настраиваемого заголовка в React Native

0 голосов
/ 10 апреля 2020

Я sh создаю заголовок для моего приложения Notes Storage в React Native. Я пробовал использовать stackNavigator до сих пор, но я поймал, как добавить иконку меню, которое onPres откроет ящик. Я пытался использовать HeaderLeft в stackDesignHead, но выдает ошибку. Также использование 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>
  )
}

Я новичок в реагировании на нативный и не знаю различных способов создания заголовка.

1 Ответ

0 голосов
/ 10 апреля 2020

Предоставляет способ создания собственных пользовательских заголовков в документах 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>
  );
}
...