切换导航器两个标题

我尝试添加:

。{
headermode:'无',
导航选项:{
headervisible:错误,
}
}
< /代码> 

到我的stacknavigator,但似乎没有效果。


我试过看类似的贴出的问题,但没有找到正确的方向。


其他人是否熟悉这个问题以及如何解决它?



应用程序JS

import react from'react';
从'react native'导入视图,文本;
从“反应导航”导入CreateStackNavigator,CreateBottomTabNavigator;
从“./navigation/appnavigator”导入appnavigator;

导出默认类app扩展react.component{
呈现()。{
返回<AppAvigator/>;
}
}
< /代码> 

应用导航器

import react from'react';
从“反应导航”导入CreateSwitchNavigator;
从“./maintabnavigator”导入maintabnavigator;

导出默认CreateSwitchNavigator(
{
主:MaintabNavigator,
}
;
< /代码> 

maintabnavigator


import react from'react';
从'react native'导入按钮、文本、视图;
从“@expo/vector icons”导入ionicons;
从“反应导航”导入CreateStackNavigator,CreateBottomTabNavigator;
从“../screens/clubs/home”导入主屏幕;
从“../screens/clubs/details”导入详细信息屏幕;

类设置屏幕扩展react.component{
静态导航选项={
//标题:'alpha',
头:空,
}(二)
呈现()。{
返回(
<view style=flex:1,justifycontent:'center',alignitems:'center'>
<text>设置!</text>
按钮
title=“回家”
onPress=()=>this.props.navigation.navigate('home')
/gt;
<按钮
title=“转到详细信息”
onPress=()=>this.props.navigation.navigate('details')
/gt;
</View>
;
}
}

const homestack=创建堆栈导航器({
主页:屏幕:主屏幕,
详细信息:屏幕:详细信息屏幕,
(});

const settingsstack=创建堆栈导航器({
设置:屏幕:设置屏幕,
详细信息:屏幕:详细信息屏幕,
(});

导出默认CreateBottomTabNavigator(
{
主页:屏幕:主页,
设置:屏幕:设置堆栈,
}
{
导航选项:(导航)=>。({
Tabbaricon:(聚焦,淡色)=>。{
const routename=navigation.state;
设图标名;
if(routename=='主页'){
iconname='iOS信息圈$聚焦?':‘大纲’};
}else if(routename=='设置'){
iconname='iOS信息圈$聚焦?':‘大纲’};
}
返回<ionicons name=iconname size=25 color=tintcolor/>;
}
}
选项卡选项:{
活动颜色:“DD016B”,
InactivetIntColor:'白色',
表格样式:{
宽度:100,
背景色:“黑色”,
}
标签样式:{
颜色:“白色”,
},请
}
}
;
< /代码> 

home js


import react,component from'react';
导入{
学徒,
ListVIEW,
视图,
文本,
样式表,
图像,
按钮,
可触摸不透明度,
文本输入,
滚动视图,
偶像,
扁平表,
}来自'react native';
从“反应导航”导入CreateStackNavigator,

导出类主屏幕扩展组件{
静态导航选项={
//标题:'alpha',
头:空,
};
……应用内容
}

appregistry.registercomponent('app',()=>app)

导出默认的CreateStackNavigator({
家:{
屏幕:主屏幕,
},请
},请

{
initialRouteName:'主页',
(});
< /代码> <MainTabNavigator,屏幕的顶部标题按预期工作,但只要导入屏幕(例如,HomeScreen)我得到一个双标题。


我已经尝试添加:

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


给我的StackNavigator但似乎没有效果。

我试过看类似的贴出的问题,但没有找到正确的方向。

其他人是否熟悉这个问题以及如何解决它?



应用程序JS

import React from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator,createBottomTabNavigator } from 'react-navigation';
import AppNavigator from './navigation/AppNavigator';

export default class App extends React.Component {
    render() {
        return <AppNavigator />;
    }
}


应用程序导航器

import React from 'react';
import { createSwitchNavigator } from 'react-navigation';
import MainTabNavigator from './MainTabNavigator';

export default createSwitchNavigator(
  {
    Main: MainTabNavigator,
  },
);


维护导航器

import React from 'react';
import { Button, Text, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import HomeScreen from '../screens/clubs/Home';
import DetailsScreen from '../screens/clubs/Details';

class SettingsScreen extends React.Component {
  static navigationOptions = {
    // title: ' Alpha',
    header: null,
  };
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

const HomeStack = createStackNavigator({
  Home: { screen: HomeScreen },
  Details: { screen: DetailsScreen },
});

const SettingsStack = createStackNavigator({
  Settings: { screen: SettingsScreen },
  Details: { screen: DetailsScreen },
});

export default createBottomTabNavigator(
  {
    Home: { screen: HomeStack },
    Settings: { screen: SettingsStack },
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = `ios-information-circle${focused ? '' : '-outline'}`;
        } else if (routeName === 'Settings') {
          iconName = `ios-information-circle${focused ? '' : '-outline'}`;
        }
        return <Ionicons name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: '#DD016B',
      inactiveTintColor: 'white',
      tabStyle: {
          width: 100,
          backgroundColor: 'black',
        },
      labelStyle:{
            color: 'white',
          },
    }
  },
);


家庭JS

import React, { Component } from 'react';
import { 
    AppRegistry,
    ListView, 
    View, 
    Text, 
    StyleSheet, 
    Image, 
    Button, 
    TouchableOpacity, 
    TextInput, 
    ScrollView,
    Icon,
    FlatList,
} from 'react-native';
import { createStackNavigator, } from 'react-navigation';

export class HomeScreen extends Component {
    static navigationOptions = {
        // title: ' Alpha',
        header: null,
    };
   ....... App content
}

AppRegistry.registerComponent('App', () => App)

export default createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
}, 

{
    initialRouteName: 'Home',
});