React native 仪表板导航器屏幕中的2个标题

我是新来的。我只是通过看例子来学习。我陷入了一个问题。在我的项目中，我实现了抽屉导航和选项卡导航，每件事都很好，但我的屏幕显示了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,
    },
});

import React，{Component}来自'React'；
从“react native material bottom navigation”导入底部导航，{FullTab}；
从“react native”导入{视图、样式表、键盘、TouchableOpacity、文本}；
从“反应本机矢量图标/材料通信图标”导入图标；
从“../Css/COLOR”导入颜色；
从“../Global/Utility”导入{font_medium，font_regular，hidenavigation，getScreenWidth，getScreenHeight，printLogs}；
从“/AddDiamond”导入{AddDiamonds}；
从“/DiamondList”导入{DimondList}；
从“react navigation”导入{DroperNavigator}；
从“react navigation”导入{StackNavigator}；
从“/CustomSideMenu”导入CustomSideMenu；
从“/Dashboard”导入{Dashboard}；
const style=StyleSheet.create({
动态文本：{
颜色：color.action_栏，
fontFamily:font_中等
},
deactiveText：{
颜色：color.tab\u取消选择\u文本\u颜色，
fontFamily:font_常规
}
})
导出类Home扩展React.Component{
静态导航选项=隐藏；
建造师（道具）{
超级（道具）；
}
应用_头=（val）=>{
this.props.navigation.setParams（{Title:val}）；
}
goToNextTab=（tabName）=>{
this.setState（{activeTab:tabName}）；
}
openDrawer（）{
this.props.navigation.openDrawer（）；
}
制表符=[{
键：“仪表板”，
图标：“速度表”，
标签：“仪表板”，
按颜色：“rgba（255、255、255、0.16）”
},
{
键：“添加菱形”，
图标：“加上圆形轮廓”，
标签：“添加菱形”，
按颜色：“rgba（255、255、255、0.16）”
},
{
钥匙：“钻石”，
图标：“钻石石”，
标签：“钻石”，
按颜色：“rgba（255、255、255、0.16）”
}]
状态={
activeTab:“仪表板”，
showFooter：对
};
renderIcon=icon=>（{isActive}）=>(
)
renderTab=（{tab，isActive}）=>(
)
render（）{
常量propsForChild={
goToNextTab：（tabName）=>this.goToNextTab（tabName），
openDrawer:（）=>this.openDrawer（）
};
常量propsForNav={
导航：这是道具，
openDrawer:（）=>this.openDrawer（）
};
常量addDimPropsForChild={
openDrawer:（）=>this.openDrawer（）
}
返回(
{
this.state.activeTab==='adddiamond'？：this.state.activeTab==='Diamond'？：
}
{
这个.state.showFooter？
{this.setState（{activeTab:newTab.key}）；}}/>
：null
}
);
}
组件willmount（）{
this.keyboardDidShowListener=Keyboard.addListener（'keyboardDidShow'，this.\u keyboardDidShow.bind（this））；
this.keyboardidhidelistener=Keyboard.addListener（'keyboardDidHide'，this.\u keyboardDidHide.bind（this））；
}
组件将卸载（）{
this.keyboardDidShowListener.remove（）；
this.keyboardidHidelistener.remove（）；
}
_键盘显示{
//警报（“显示键盘”）；
this.setState（{showFooter:false}）
}
_键盘隐藏（）{
//警报（“键盘隐藏”）；
this.setState（{showFooter:true}）
}
}
导出默认的MyDroperNavigator=DroperNavigator({
第1页：{
屏幕：道具=>,，
}
},
{
contentComponent:props=>（），
抽屉宽度：（getScreenWidth（）*2.5）/3，
}
);
const Dashboard_Stack=StackNavigator({
仪表板U堆栈：{
屏幕：仪表板，
},
});
const Add_Dimond_Stack=StackNavigator({
添加\u Dimond\u堆栈：{
屏幕：AddDiamonds，
},
});
const Dimond_List_stack=StackNavigator({
Dimond_列表_堆栈：{
屏幕：DimondList，
},
});

Dashboard.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} />
        }
    }

导出类仪表板扩展React.Component{
静态导航选项=（{navigation}）=>{
const{state}=导航；
返回{
标题：“仪表板”，
headerStyle:styleApp.actionBarHeaderBgStyle，
headerTitleStyle:styleApp.actionBarTextStyle，
左校长：
}
}

这里有错误

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

});

替换为

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

    });

如果您使用的是不同类型的版本，下面是答案

从第5版开始更新

从第5版开始，它是

screenpoptions

用法示例：

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

旧答案

我使用它来隐藏堆栈栏（注意这是第二个参数的值）：

---

我通过在我的根App.js文件中添加以下行解决了这个问题

 home: { screen: home,
    navigationOptions:{
      header:null
    } }

---

它将隐藏我的子组件（仪表板）标题，但问题是我无法修改父标题，当我使用带有标题、标题样式的navigationOptions时，不会发生任何情况，因此我需要删除父标题。子标题可以根据需要修改父项，标题样式在此处不适用。您必须使用函数dashborad.js文件中的“static navgationOptions”和样式设置asstatic navigationOptions=（{navigation}）=>{return{headerLeft:（{navigation.navigation（'Home'）}}}color=“#fff”tintColor=“#fff”/>），headerStyle:{backgroundColor:'rgb(

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

 home: { screen: home,
    navigationOptions:{
      header:null
    } }