2 заголовка на экране в приборной панели навигатора - PullRequest
Новая
       17

2 заголовка на экране в приборной панели навигатора

0 голосов
/ 17 марта 2020

Я новичок в ReactNative. Я изучаю вещи, просто видя примеры. Я застреваю в одном вопросе. В моем проекте я реализовал навигацию по ящикам и навигацию по вкладкам, все работает нормально, но мой экран показывает 2 заголовка. Я много пытался удалить этот заголовок, но все равно не добился успеха. У всех дочерних экранов есть свой заголовок. Я попытался удалить дочерний заголовок (это случилось) и изменил родительский заголовок, но безуспешно.

Вот мой код: 

import React, { Component } from 'react';
import BottomNavigation, { FullTab } from 'react-native-material-bottom-navigation';
import { View, StyleSheet, Keyboard, TouchableOpacity, Text } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import COLOR from '../Css/COLOR';
import { font_medium, font_regular, hidenavigation, getScreenWidth, getScreenHeight, printLogs } from '../Global/Utility';
import { AddDiamonds } from './AddDiamond';
import { DimondList } from './DiamondList';
import { DrawerNavigator } from 'react-navigation';
import { StackNavigator } from 'react-navigation';
import CustomSideMenu from './CustomSideMenu';
import { Dashboard } from './Dashboard';


const style = StyleSheet.create({
    activeText: {
        color: COLOR.action_bar,
        fontFamily: font_medium
    },
    deactiveText: {
        color: COLOR.tab_deselected_text_color,
        fontFamily: font_regular
    }
})


export class Home extends React.Component {

    static navigationOptions = hidenavigation;

    constructor(props) {
        super(props);
    }

    apply_header = (val) => {
        this.props.navigation.setParams({ Title: val });
    }

    goToNextTab = (tabName) => {
        this.setState({ activeTab: tabName });
    }

    openDrawer() {
        this.props.navigation.openDrawer();
    }

    tabs = [{
        key: 'Dashboard',
        icon: 'speedometer',
        label: 'Dashboard',
        pressColor: 'rgba(255, 255, 255, 0.16)'
    },
    {
        key: 'Add Diamond',
        icon: 'plus-circle-outline',
        label: 'Add Diamond',
        pressColor: 'rgba(255, 255, 255, 0.16)'
    },
    {
        key: 'Diamond',
        icon: 'diamond-stone',
        label: 'Diamond',
        pressColor: 'rgba(255, 255, 255, 0.16)'
    }]

    state = {
        activeTab: 'Dashboard',
        showFooter: true
    };

    renderIcon = icon => ({ isActive }) => (
        <Icon size={24} color={isActive ? COLOR.action_bar : COLOR.tab_deselected_text_color} name={icon} />
    )

    renderTab = ({ tab, isActive }) => (
        <FullTab isActive={isActive} key={tab.key} label={tab.label} labelStyle={isActive ? style.activeText : style.deactiveText} renderIcon={this.renderIcon(tab.icon)} />
    )

    render() {
        const propsForChild = {
            goToNextTab: (tabName) => this.goToNextTab(tabName),
            openDrawer: () => this.openDrawer()
        };

        const propsForNav = {
            nav: this.props,
            openDrawer: () => this.openDrawer()
        };

        const addDimPropsForChild = {
            openDrawer: () => this.openDrawer()
        }
        return (
            <View style={{ flex: 1 }}>
                <View style={{ flex: 1 }}>
                    {
                        this.state.activeTab === 'Add Diamond' ? <Add_Dimond_Stack screenProps={addDimPropsForChild} /> : this.state.activeTab === 'Diamond' ? <Dimond_List_stack screenProps={propsForNav} /> : <Dashboard_Stack screenProps={propsForChild} />
                    }
                </View>
                {
                    this.state.showFooter ?
                        <BottomNavigation activeTab={this.state.activeTab} renderTab={this.renderTab} tabs={this.tabs} onTabPress={newTab => { this.setState({ activeTab: newTab.key }); }} />
                        : null
                }

            </View>
        );
    }

    componentWillMount() {
        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
    }

    componentWillUnmount() {
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();
    }

    _keyboardDidShow() {
        //alert('Keyboard Shown');
        this.setState({ showFooter: false })
    }

    _keyboardDidHide() {
        //alert('Keyboard Hidden');
        this.setState({ showFooter: true })
    }

}

export default MyDrawerNavigator = DrawerNavigator({
    Page1: {
        screen: props => <Home {...props} />,
    }
},
    {
        contentComponent: props => (<CustomSideMenu {...props} />),
        drawerWidth: (getScreenWidth() * 2.5) / 3,
    }
);


const Dashboard_Stack = StackNavigator({
    Dashboard_Stack: {
        screen: Dashboard,
    },

});

const Add_Dimond_Stack = StackNavigator({
    Add_Dimond_Stack: {
        screen: AddDiamonds,
    },
});

const Dimond_List_stack = StackNavigator({
    Dimond_List_stack: {
        screen: DimondList,
    },
});

Панель инструментов. js

export class Dashboard extends React.Component {

    static navigationOptions = ({ navigation }) => {
        const { state } = navigation;
        return {
            title: 'Dashboard',
            headerStyle: styleApp.actionBarHeaderBgStyle,
            headerTitleStyle: styleApp.actionBarTextStyle,
            headerLeft:
                <HeaderMenuIcon nav={state.params} />
        }
    }

Ответы [ 2 ]

0 голосов
/ 17 марта 2020

Я решил эту проблему, просто добавив следующую строку в мое root приложение. js файл 

 home: { screen: home,
    navigationOptions:{
      header:null
    } }
0 голосов
/ 17 марта 2020

Ошибка здесь 

const Dashboard_Stack = StackNavigator({
    Dashboard_Stack: {
        screen: Dashboard,
    },

});

Заменить на 

const Dashboard_Stack = StackNavigator({
        Dashboard_Stack: {
            screen: Dashboard,
            navigationOptions: 
                        {
                           header: null
                       },
        },

    });

Если вы используете версии разных типов, чем здесь ответ за это

ОБНОВЛЕНИЕ с версии 5

Начиная с версии 5 это опция headerShown в screenOptions

Пример использования : 

<Stack.Navigator
  screenOptions={{
    headerShown: false
  }}
>
  <Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>

ОБНОВЛЕНИЕ

Начиная с версии 2.0.0-alpha.36 (2019-11-07), существует новый navigationOption: headershown

navigationOptions: {
        headerShown: false,
      }

Старый ответ

Я использую это, чтобы скрыть панель стека (обратите внимание, что это значение второго параметра): 

{
    headerMode: 'none',
    navigationOptions: {
        headerVisible: false,
    }
}
...